Stop named function from executing itself

Question

I am trying to build a simple webpage, which simply checks the value of the strings in two input fields, such that when the Test button is clicked, a previously hidden div will show the boolean value to be returned (If isomorphic return true, else, return false).

This is my code:

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Isomorphics App</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="styles.css" />
  </head>
  <body>
    <div class="container">
      <div class="content">
        <div class="header">
            <p class="title">Isomorphics</p>
            <span>&nbsp;</span>
            <p class="description">Find out if any two strings are isomorphic.</p>
            <span>&nbsp;</span>
            <p>Enter any two words (strings) in the fields below:</p>
          </div>
          <div class="input-container">
            <input class="input" id="s" placeholder="First string" />
            <input class="input" id="t" placeholder="Second string" />
            <button class="input-button" id="submit-button">Test</button>
          </div>
          <div class="isomorphic-state-container" id="isomorphic-state-container">
            <div class="isomorphic-state-holder" id="isomorphic-state-holder">
              <p class="isomorphic-state" id="isomorphic-state">ili</p>
            </div>
          </div>
        </div>
      </div>
    <script src="main.js"></script>
  </body>
</html>

main.js

let s = document.getElementById('s').innerText;
let t = document.getElementById('t').innerText;
console.log(s);
document.getElementById('submit-button').onclick = isomorphic(s, t);
console.log(isomorphic(s, t));

function isomorphic(str1, str2) {
  if (str1.length !== str2.length) {
    alert('Please enter two strings of equal length.');
  }
  let map = {};
  for (let i = 0; i < str1.length; i++){
    let a = str1[i]; 
    let b = str2[i];
    if (typeof map[a] === 'undefined') {
      map[a] = b;
    } else if (map[a] !== b) {
      // alert(false);
      document.getElementById('isomorphic-state-container').style.display = 'block';
      document.getElementById('isomorphic-state-holder').style.backgroundColor = 'red';
      document.getElementById('isomorphic-state').innerText = 'False'
    }
    for (var key in map) {
      if (key !== a && b === map[key]) {
        // alert(false);
        document.getElementById('isomorphic-state-container').style.display = 'block';
        document.getElementById('isomorphic-state-holder').style.backgroundColor = '#D64BFB';
        document.getElementById('isomorphic-state').innerText = 'False'
      }
    }
  }
  document.getElementById('isomorphic-state-container').style.display = 'block';
  document.getElementById('isomorphic-state-holder').style.backgroundColor = 'green';
  document.getElementById('isomorphic-state').innerText = 'True'
}

styles.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Roboto Mono;
  font-size: 16px;
}
*:focus {
  outline: none;
}
.header {
  color: #FFFFFF;
  text-align: center;
}
.header .title {
  font-size: 36px;
}
.header .description {
  font-size: 16px;
}
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
  background-color: #000000;
}
.container .content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  height: 65%;
  width: 100%;
}
.container .content .input-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  width: 50%;
  height: 150px;
}
.container .content .input-container .input {
  width: 100%;
  height: 40px;
  font-size: 16px;
  padding-left: 10px;
}
.container .content .input-container .input-button {
  width: 100%;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
  font-size: 16px;
}
.container .content .input-container .input-button:hover {
  cursor: pointer;
}
.isomorphic-state-container {
  display: none;
  width: 50%;
  height: 40px;
}
.isomorphic-state-holder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.isomorphic-state {
  color: #FFFFFF;
  font-size: 16px;
}

After running this code, the javascript defaults the value to true, and doesn't work even when I click the button. Screenshot:

What should I do to make the code run only when the button is clicked? Or, is the named function causing the problem?

T.J. Crowder · Accepted Answer · 2018-08-12T14:47:58.407

This line:

document.getElementById('submit-button').onclick = isomorphic(s, t);

calls your function and then assigns its return value to onclick, exactly the way x = foo() calls foo and assigns its result to x. To set a click event handler that way, you assign a function (not its result) to the onclick property, for instance:

document.getElementById('submit-button').onclick = function() {
    isomorphic(s, t);
};

(You'll also want to remove the console.log(isomorphic(s, t)); line, since it also calls the function.)

If you want to get s and t as of when the button is clicked, instead of when the script first runs, move those lines into the click handler as well:

document.getElementById('submit-button').onclick = function() {
    let s = document.getElementById('s').innerText;
    let t = document.getElementById('t').innerText;
    isomorphic(s, t);
};

Better yet, use modern event handling via addEventListener:

document.getElementById('submit-button').addEventListener("click", function() {
    // ...handler code...
});

If you need to support obsolete browsers like IE8, this answer has a workaround to their lack of addEventListener support.

There are several other issues with your code, though. For instance, to get the value of an input element, you use its value property, not its innerText property (it doesn't have any inner text, because it's a void element). You're also not returning after your alert about unequal string lengths, which you probably want to do since otherwise you go ahead and run the body of the function even though you did the alert...

Stop named function from executing itself

1 Answers1