Javascript function not being called successfully

Question

The idea for now is to just display "hello world!" to check if the function is being called properly by the button. I've tried to copy-paste from previous code that worked, checked the parentheses, brackets, anything that could disrupt the function call. While nothing after the "hello world!" is necessary to answer the question, I'd greatly appreciate it if you gave suggestions for the rest of the code below. The idea there is to take user input, and give different results based on string length.

function persona() {
  document.write("hello world!");
  var name, inputstr, sum = 0;
  name = document.getElementById("input").value;
  inputstr = name.length;
  while (inputstr / 10 >= 1) {
    if (inputstr = 11 || inputstr = 22) {
      break;
    }
    sum += inputstr % 10;
    inputstr = Math.floor(inputstr / 10);
    if (inputstr = 11 || inputstr = 22) {
      break;
    }
  }
  switch (inputstr) {
    case 1:
      document.getElementById("results").innerHTML = "...";
      break;;
    case 2:
      document.getElementById("results").innerHTML = "...";
      break;;
    case 3:
      document.getElementById("results").innerHTML = "...";
      break;;
    case 4:
      document.getElementById("results").innerHTML = "...";
      break;;
    case 5:
      document.getElementById("results").innerHTML = "...";
      break;;
    case 6:
      document.getElementById("results").innerHTML = "...";
      break;;
    case 7:
      document.getElementById("results").innerHTML = "...";
      break;;
    case 8:
      document.getElementById("results").innerHTML = "...";
      break;;
    case 9:
      document.getElementById("results").innerHTML = "...";
      break;;
    case 11:
      document.getElementById("results").innerHTML = "...";
      break;;
    case 22:
      document.getElementById("results").innerHTML = "...";
      break;;
  }
}

body {
  background-color: #a89b28;
  color: #f0f1f6;
  font-family: impact;
  text-align: center;
}

<!DOCTYPE html>
<html>
<title>Number Personality Calculator</title>

<head>
  <meta name="description" content="Input your name, and predict your personality type" />
  <meta name="keywords" content="JavaScript, JS, numerology, personality" />
  <meta name="author" content="[REDACTED], 18/02/2018" />
  <meta charset="UTF-8">
</head>

<body>
  <h1>PERSONALITY TYPE CHECKER</h1>
  <p id="results">""</p>
  <input type="text" id="input" placeholder="Juan Dela Cruz"><br>
  <button onclick="persona()">Get your personality</button>
</body>

</html>

You shouldn't use document.write after the page has been parsed (or maybe at all). dw clears the page and creates a new document. — Teemu
– Teemu, Commented Feb 18, 2019 at 17:09
You also shouldn't use attributes to assign event handlers. Use element.addEventListener. — Jared Smith
– Jared Smith, Commented Feb 18, 2019 at 17:10
If you want to check if a function is working, I'd suggest using alert() instead — Aniket G
– Aniket G, Commented Feb 18, 2019 at 17:10
Instead of document.write, you want to select the results element and change its innerHTML attribute. You can do this like: let resultsElement = document.getElementById("results"); resultsElement.innerHTML = "Hello World."; — Cat
– Cat, Commented Feb 18, 2019 at 17:13

cb64 · Accepted Answer · 2019-02-18 17:15:24Z

If you're just trying to fix the error with your code its because you are using assignment operators in your if statements instead of comparison operators.

Change inputstr = x to inputstr == x

<!DOCTYPE html>
<html>
<title>Number Personality Calculator</title>

<head>
  <meta name="description" content="Input your name, and predict your personality type" />
  <meta name="keywords" content="JavaScript, JS, numerology, personality" />
  <meta name="author" content="[REDACTED], 18/02/2018" />
  <meta charset="UTF-8">
  <style>
    body {
      background-color: #a89b28;
      color: #f0f1f6;
      font-family: impact;
      text-align: center;
    }
  </style>
</head>

<body>
  <h1>PERSONALITY TYPE CHECKER</h1>
  <p id="results">""</p>
  <input type="text" id="input" placeholder="Juan Dela Cruz"></br>
  <button onclick="persona()">Get your personality</button>
  <script>
    function persona() {
      document.write("hello world!");
      var name, inputstr, sum = 0;
      name = document.getElementById("input").value;
      inputstr = name.length;
      while (inputstr / 10 >= 1) {
        if (inputstr == 11 || inputstr == 22) {
          break;
        }
        sum += inputstr % 10;
        inputstr = Math.floor(inputstr / 10);
        if (inputstr == 11 || inputstr == 22) {
          break;
        }
      }
      switch (inputstr) {
        case 1:
          document.getElementById("results").innerHTML = "...";
          break;;
        case 2:
          document.getElementById("results").innerHTML = "...";
          break;;
        case 3:
          document.getElementById("results").innerHTML = "...";
          break;;
        case 4:
          document.getElementById("results").innerHTML = "...";
          break;;
        case 5:
          document.getElementById("results").innerHTML = "...";
          break;;
        case 6:
          document.getElementById("results").innerHTML = "...";
          break;;
        case 7:
          document.getElementById("results").innerHTML = "...";
          break;;
        case 8:
          document.getElementById("results").innerHTML = "...";
          break;;
        case 9:
          document.getElementById("results").innerHTML = "...";
          break;;
        case 11:
          document.getElementById("results").innerHTML = "...";
          break;;
        case 22:
          document.getElementById("results").innerHTML = "...";
          break;;
      }
    }
  </script>
</body>

</html>

Tobija Fischer · Accepted Answer · 2019-02-18 17:14:11Z

1

I don't know how your HTML markup looks like that for me, to console.log or alert() the "Hello World" has proven to be a saver way of testing whether a function is working.

Maybe try that just in case the function gets actually called but there is another thing not working with the rest of the code...

answered Feb 18, 2019 at 17:14

Tobija Fischer

3445 silver badges10 bronze badges

Comments

Aniket G · Accepted Answer · 2019-02-18 17:14:21Z

On lines 8 and 14 (in my snippet), you had single equals inside an if statement. That's a very simple mistake that could throw your whole code off.

Debugging is a very valuable tool. Always when debugging, use alert() or console.log() not document.write(). Personally, the way I debug is by slowly removing the lines one by one seeing which one causes the error. That way is slow and tedious, but foolproof. I caught your error in no time.

= is meant to assign a value to a variable. == is meant to compare 2 values. If you try to use = inside an if statement, it will completely break your code (you shouldn't be assigning anything inside an if statement. Only comparing).

function persona() {
  alert("hello world!");
  var name, inputstr, sum = 0;
  name = document.getElementById("input").value;
  inputstr = name.length;
  while (inputstr / 10 >= 1) {
    //You had single equals below. Should be double
    if (inputstr == 11 || inputstr == 22) {
      break;
    }
    sum += inputstr % 10;
    inputstr = Math.floor(inputstr / 10);
    //You had single equals below. Should be double
    if (inputstr == 11 || inputstr == 22) {
      break;
    }
  }
  switch (inputstr) {
    case 1:
      document.getElementById("results").innerHTML = "...";
      break;;
    case 2:
      document.getElementById("results").innerHTML = "...";
      break;;
    case 3:
      document.getElementById("results").innerHTML = "...";
      break;;
    case 4:
      document.getElementById("results").innerHTML = "...";
      break;;
    case 5:
      document.getElementById("results").innerHTML = "...";
      break;;
    case 6:
      document.getElementById("results").innerHTML = "...";
      break;;
    case 7:
      document.getElementById("results").innerHTML = "...";
      break;;
    case 8:
      document.getElementById("results").innerHTML = "...";
      break;;
    case 9:
      document.getElementById("results").innerHTML = "...";
      break;;
    case 11:
      document.getElementById("results").innerHTML = "...";
      break;;
    case 22:
      document.getElementById("results").innerHTML = "...";
      break;;
  }
}

body {
  background-color: #a89b28;
  color: #f0f1f6;
  font-family: impact;
  text-align: center;
}

<!DOCTYPE html>
<html>
<title>Number Personality Calculator</title>

<head>
  <meta name="description" content="Input your name, and predict your personality type" />
  <meta name="keywords" content="JavaScript, JS, numerology, personality" />
  <meta name="author" content="[REDACTED], 18/02/2018" />
  <meta charset="UTF-8">
</head>

<body>
  <h1>PERSONALITY TYPE CHECKER</h1>
  <p id="results">""</p>
  <input type="text" id="input" placeholder="Juan Dela Cruz"><br>
  <button onclick="persona()">Get your personality</button>
</body>

</html>

Collectives™ on Stack Overflow

Javascript function not being called successfully

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related