CODEWITHSUNDEEP
javascript
user7963850
user7963850

Reputation:

button onclick function is not called

I'm making a webpage and when a button is clicked, it will delete every element inside the HTML element and append an iframe. Although, it doesn't seem to be working. index.html:

<html id="html">
<head>
<script type="text/javascript" src="/freevpn/script.js"></script>
</head>
<body>
<input type="text" id="input" value="https://">
<button onclick="submit()">Go!</button>
</body>
</html>

script.js:

function submit() {
var submit = document.getElementById("submit");
var input = document.getElementById("input");
var iframe = document.createElement("iframe");
var html = document.getElementById("html");
iframe.setAttribute("src", input.value);
html.innerHTML = "";
html.appendChild(iframe);
iframe.requestFullscreen();
}

I'm not sure why this isn't working, but it has to be something. Thanks in advance!

NEW UPDATE: There were a few problems. It is linking to the javascript, I fixed the function, and I added parenthesis, but it doesn't seem to be updated in the browser. I've cleared my cache and everything, and it still isn't updating. My website is linked through Freenom, Cloudflare, Google Analytics and Search Console, so does it just take a while to update? And if so, is there a way to make it faster?

Upvotes: 2

Views: 78

Answers (2)

John
John

Reputation: 770

Try this, you are calling the function incorrectly.

You must use the () to call a function:

<button onclick="submit()">Go!</button>


function submit() {
  var submit = document.getElementById("submit");
  var input = document.getElementById("input");
  var iframe = document.createElement("iframe");
  var html = document.getElementById("html");
  
  iframe.setAttribute("src", input.value);
  html.innerHTML = "";
  html.appendChild(iframe);
  iframe.requestFullscreen();
}
<html id="html">
<head>
  <script type="text/javascript" src="/freevpn/script.js"></script>
</head>
<body>
  <input type="text" id="input" value="https://www.youtube.com/embed/_70Q-Xj3rEo">
  <button onclick="submit()">Go!</button>
</body>
</html>

Upvotes: 2

Seiont
Seiont

Reputation: 59

You are missing the parentheses when you are calling your JavaScript function. Try the below:

<button onclick="submit()">Go!</button>

Here is a handy reference for the onclick Event: https://www.w3schools.com/jsref/event_onclick.asp

Also it is a good idea to call put your <script> tag at the bottom of the body (i.e. below the button in your code snippet). This is because the Javascript file will be loaded first and the HTML elements may not have been created yet that you are accessing with the DOM.

Upvotes: 1

Related Questions