Не получается изменение текста в span при get request через api
main.js:
var url = document.getElementById("urlinput").value;
var endpoint = "https://ulvis.net/api.php?url=";
function httpGet()
{
var JSONHttp = new JSONHttpRequest();
var datareq = endpoint+url
JSONHttp.open( "GET", datareq, false ); // false for synchronous request
JSONHttp.send( null );
return JSONHttp.responseText;
}
function shorturl(){
var short = httpGet();
document.getElementById("home-text12").textContent=short;
}
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>L2S</title>
<meta property="og:title" content="L2S" />
<meta property="twitter:card" content="summary_large_image" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta property="og:title" content="Profile - Soft UI Pro" />
<meta property="og:title" content="ComingSoon - Soft UI Pro" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<meta property="twitter:card" content="summary_large_image" />
<style data-tag="reset-style-sheet">
html { line-height: 1.15;}body { margin: 0;}* { box-sizing: border-box; border-width: 0; border-style: solid;}p,li,ul,pre,div,h1,h2,h3,h4,h5,h6 { margin: 0; padding: 0;}button,input,optgroup,select,textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0;}button,select { text-transform: none;}button,[type="button"],[type="reset"],[type="submit"] { -webkit-appearance: button;}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner { border-style: none; padding: 0;}button:-moz-focus,[type="button"]:-moz-focus,[type="reset"]:-moz-focus,[type="submit"]:-moz-focus { outline: 1px dotted ButtonText;}a { color: inherit; text-decoration: inherit;}input { padding: 2px 4px;}img { display: block;}html { scroll-behavior: smooth }
</style>
<style data-tag="default-style-sheet">
html {
font-family: Open Sans;
font-size: 1rem;
}
body {
font-weight: 400;
font-style:normal;
text-decoration: none;
text-transform: none;
letter-spacing: normal;
line-height: 1.625;
color: var(--dl-color-secondary-400);
background-color: var(--dl-color-gray-white);
}
</style>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap"
data-tag="font"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
data-tag="font"
/>
<style>
html * {
-webkit-font-smoothing: antialiased;
}
input::placeholder, textarea::placeholder {
color: #d2d6da;
}
</style>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div>
<link href="./home.css" rel="stylesheet" />
<div class="home-container">
<div data-role="Header" class="header-header">
<nav class="header-nav">
<div class="header-container">
<a href="home.html" class="header-navlink">Long2Short.GA</a>
<div class="header-container1">
<div class="header-container2"></div>
<div data-type="BurgerMenu" class="header-burger-menu">
<svg viewBox="0 0 1024 1024" class="header-icon">
<path
d="M128 256h768v86h-768v-86zM128 554v-84h768v84h-768zM128 768v-86h768v86h-768z"
></path>
</svg>
</div>
</div>
</div>
</nav>
<div data-type="MobileMenu" class="header-mobile-menu">
<div class="header-top">
<a href="home.html" class="header-navlink1 large">
Long2Short
</a>
<div data-type="CloseMobileMenu" class="header-close-menu">
<svg viewBox="0 0 1024 1024" class="header-icon2">
<path
d="M810 274l-238 238 238 238-60 60-238-238-238 238-60-60 238-238-238-238 60-60 238 238 238-238z"
></path>
</svg>
</div>
</div>
<div class="header-mid">
<div class="header-menu">
<a href="home.html" class="header-navlink2 large">Home</a>
<a href="profile.html" class="header-navlink3 large">Profile</a>
<a href="coming-soon.html" class="header-navlink4 large">
Coming Soon
</a>
</div>
</div>
<div class="header-bot">
<div class="primary-pink-button-container">
<button class="primary-pink-button-button button buttonSmall">
<span>buy now</span>
</button>
</div>
</div>
</div>
</div>
<div class="home-hero">
<div class="home-container1">
<div class="home-card">
<h1 class="home-text">
<span>Soft URL Shortener</span>
<br />
</h1>
<h1 class="home-text03 headingOne">Choose the best</h1>
<span class="home-text04">
Best in the service industry to reduce references
</span>
<div class="home-container2"></div>
</div>
</div>
</div>
<img
alt="image"
src="public/playground_assets/curved6-1500h.jpg"
class="home-image"
/>
<section class="home-testimonials">
<div class="home-container3">
<div class="home-container4">
<div class="home-container5">
<h2 class="home-text05">
<span>Try our system!</span>
<br />
</h2>
<p class="home-text08">
<span>Keep trying our system!</span>
<br />
</p>
</div>
<input
type="text"
required
placeholder="Type here"
class="home-textinput input"
/>
<button type="button" onclick="shorturl()" class="home-button button">Generate</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="main.js"></script>
</div>
<div class="home-container6">
<span class="home-text11">
<span class="home-text12">here be link</span>
<br />
</span>
<div class="home-logos"><div class="home-container7"></div></div>
</div>
</div>
<img
alt="image"
src="public/playground_assets/bottom.svg"
class="home-bottom-wave-image"
/>
<img
alt="image"
src="public/playground_assets/waves-white.svg"
class="home-image1"
/>
<img
alt="image"
src="public/playground_assets/top.svg"
class="home-top-wave-image"
/>
</section>
</div>
</div>
<script src="https://unpkg.com/@teleporthq/teleport-custom-scripts"></script>
</body>
</html>
ничего не происходит, в чем ошибка при запросе - не понимаю.