The function linked to the button's onclick event is not being triggered

Question

The function linked to the button's onclick event is not being triggered

I am currently in the process of developing a webpage where, upon clicking a button, all elements within an HTML element are deleted and replaced with an iframe. However, I have encountered some issues as my code does not seem to be functioning properly. 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 am unsure why this functionality is not working as intended, but I believe there must be a solution. Any help would be greatly appreciated!

UPDATE: After troubleshooting, I identified a few issues such as linking problems with the JavaScript file, fixing the function, and ensuring all necessary parentheses were added. Despite making these updates, I am still unable to see any changes reflected on my webpage after clearing my cache. My website is integrated with Freenom, Cloudflare, Google Analytics, and Search Console - could this integration be delaying the update process? If so, is there a way to expedite this update?

javascript

Answer 1

Answer №1

Make sure you are using the function correctly.

Remember to include () when calling 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>

Answer 2

Make sure you are using the function correctly.

Remember to include () when calling 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>

Answer 3

Answer №2

Don't forget to include the parentheses when invoking your JavaScript function. Give this a try:

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

If you need some extra help with the onclick Event, check out this useful resource:

Remember to place your <script> tag at the end of the body section (after the button in your code snippet). This ensures that the Javascript file is loaded after the HTML elements have been created and can be accessed by the DOM.

Answer 4

Don't forget to include the parentheses when invoking your JavaScript function. Give this a try:

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

If you need some extra help with the onclick Event, check out this useful resource:

Remember to place your <script> tag at the end of the body section (after the button in your code snippet). This ensures that the Javascript file is loaded after the HTML elements have been created and can be accessed by the DOM.

The function linked to the button's onclick event is not being triggered

Answer №1

Answer №2

Similar questions

Developing several sliders and ensuring they operate independently of each other

Tips for Re-positioning the Manage Password Window in a Browser Using CSS

What is the best way to confirm only one click per browser?

"Struggling to make the 'overflow: hidden' property work for an absolutely positioned

What's the deal with this error message saying val.slice isn't a function?

Adding an extra element to the <MuiThemeProvider /> causes the page to display as blank with no error notifications

A cautionary message about the React / TypeScript serviceWorker Update function and steps to troubleshoot

Progressive bar functionality for file uploading in Ajax web API

Transfer a parameter from a user input to control pagination in React.js

Guide on creating a function that accepts an Array of strings as a parameter and displays the initial letter of each element individually on separate lines

Keeping related items organized in Vue

The rendering of HTML DOM is being obstructed on iPhone devices running iOS 13

Utilizing Event Delegation in jQuery to Handle submit() Events

Troubleshooting Problems with Cookie and Session Management

Dragging and dropping files will not result in any redirection

Displaying a dropdown menu from the top by utilizing the show() function

Two-sided vertical CSS menu

Using JavaScript to organize and categorize data within an array

Executing Client-Side Function Upon Data Retrieval in a Node.js Application

guide to setting up router access using token