CODEWITHSUNDEEP
javascript
jes merida
jes merida

Reputation: 11

My function inside innerHTML not working its say when i click the button the function is not defined

Hello can someone help me thanks i don't know what's wrong.

var state = false;

function myFunction() {
  var x = document.getElementById("button");
  state = !state;
  if (state) {
    x.value = "ON";
  } else {
    x.value = "OFF";
  }
}

const rootApp = document.getElementById("root");
rootApp.innerHTML = '<input id="button" value="ON" type="button" onclick="myFunction()" />';

Upvotes: 1

Views: 1315

Answers (2)

daformat
daformat

Reputation: 786

Are you sure there is a #root element in your document? Is the javascript code located in the head or in the body?

The code you gave works fine already if you copy/paste it into your console on this page and target document.body within rootApp instead of document.getElementById("root"); so I suspect your problem happens because of something external to it.

Additionally

  1. If you use const you should use let instead of var, since you're declaring state in the top level scope, it will be accessible within any nested scopes (your function's body)

  2. If you don't care about (3) you can access the button by passing this to myFunction within the onclick attribute, doing so eliminates the need to use getElementById inside myFunction as it will be given as an argument

  3. It's better to create the button element yourself and use addEventListener to add interactivity instead of using innerHTML

As a bonus, this could be improved by using a checkbox instead of a button: you wouldn't have to synchronize the checked state all the time. You can always style the checkbox to look like something else using css

Reworked code

let state = false;

function myFunction({ target }) {
  state = !state;
  target.value = state ? 'ON' : 'OFF';
}

// Let's try to get the #root element
const rootId = 'root';
let rootApp = document.getElementById(rootId);

// If you don't have a #root element, we can create one
if (!rootApp) {
  rootApp = document.createElement('div');
  rootApp.id = rootId;
  document.body.appendChild(rootApp);
}

// Create the button element and setup its attributes
const element = document.createElement('input');
element.type = 'button';
element.id = 'button';

// Make sure `value` is in sync with `state`
element.value = state ? 'ON' : 'OFF';

// Listen to click event
element.addEventListener('click', myFunction);

// Append to #root
rootApp.appendChild(element);

Here is a working CodeSandbox forked from yours and updated with my js

Upvotes: 0

aloha
aloha

Reputation: 99

<!DOCTYPE html>
<html>
  <head>
    <title></title>
  </head>
  <body>
    <div id="root"></div>
    <script>
      var state = false;
      function myFunction() {
        var x = document.getElementById("button");
        state = !state;
        if (state) {
          x.value = "ON";
        } else {
          x.value = "OFF";
        }
      }
    
      const rootApp = document.getElementById("root");
      rootApp.innerHTML = '<input id="button" value="ON" type="button" onclick="myFunction()" />';
    </script>
  </body>
</html>

Upvotes: 1

Related Questions