Getting results from a javascript function to display in html element. I can get it to work with console.log(golfScore(4, 3)); but not user input

Question

Getting results from a javascript function to display in html element.

I can get it to work with console.log(golfScore(4, 3)); but not user input.

I'm pretty sure the problem is in this line document.getElementById("message").innerHTML = golfScore();

If I put numbers or anything inside golfScore( HERE ); nothing works.

I can get console.log(golfScore(4, 3)) to print the correct answer in the console or I can get the correct answer to display in the p element if I use something like document.getElementById("message").innerHTML = golfScore(4, 3);

But I can't get the user input to run through the function and return the correct answer in the p element

// 2 user inputs one for par and one for strokes. depending on 2 values entered re

let strokes = document.getElementById('strokes').value;
let par = document.getElementById('par').value;
let names = ["Hole-in-one!", "Eagle", "Birdie", "Par", "Bogey", "Double Bogey", "Go Home!"];

function golfScore(par, strokes) {
  if (strokes == 1) {
    return names[0];
  } else if (strokes <= par - 2) {
    return names[1];
  } else if (strokes == par - 1) {
    return names[2];
  } else if (strokes === par) {
    return names[3];
  } else if (strokes == par + 1) {
    return names[4];
  } else if (strokes == par + 2) {
    return names[5];
  } else if (strokes >= par + 3) {
    return names[6];
  }
  document.getElementById("message").innerHTML = golfScore();
}

<!DOCTYPE html>
<html>
<head>
  <title>Golf Score</title>
</head>

<body>
  <h1>Golf Score</h1>
  <form>
    Strokes: <input type="text" id="strokes"> Par: <input type="text" id="par">
    <button type="button" onclick="golfScore(par, strokes)">How did you do?</button>
  </form>
  <p id="message"> </p>
</body>
</html>

The if statement exits the function.

epascarello
– epascarello

2020-09-23 21:51:08 +00:00
Commented Sep 23, 2020 at 21:51 — epascarello
– epascarello, Commented Sep 23, 2020 at 21:51

epascarello · Accepted Answer · 2020-09-23 21:56:14Z

When you go into the if statement, it exits the function. You reference the input fields when page is rendered, so you do not have the values. You are using strings as numbers.

let names = ["Hole-in-one!", "Eagle", "Birdie", "Par", "Bogey", "Double Bogey", "Go Home!"];

function golfScore() {
  let strokes = +document.getElementById('strokes').value;
  let par = +document.getElementById('par').value;
  var val;
  if (strokes == 1) {
    val = names[0];
  } else if (strokes <= par - 2) {
    val = names[1];
  } else if (strokes == par - 1) {
    val = names[2];
  } else if (strokes === par) {
    val = names[3];
  } else if (strokes == par + 1) {
    val = names[4];
  } else if (strokes == par + 2) {
    val = names[5];
  } else if (strokes >= par + 3) {
    val = names[6];

  }
  document.getElementById("message").innerHTML = val;
}

<h1>Golf Score</h1>

<form>

  <label for="strokes">Strokes: <label><input type="text" id="strokes">
  <label for="par">Par: </label><input type="text" id="par">

  <button type="button" onclick="golfScore(par, strokes)">How did you do?</button>

</form>

<p id="message"> </p>

Barmar · Accepted Answer · 2020-09-23 21:59:23Z

You're never executing the statement that assigns to innerHTML, because return exits from the function.

And even if you did get there, it would call golfScore() again, but with no arguments, so none of the if conditions would succeed.

Instead of returning, you should assign to a variable, then assign that to the innerHTML at the end.

The arguments you're passing to golfScore() are the input elements. It needs to get their values.

// 2 user inputs one for par and one for strokes. depending on 2 values entered re

let strokes = document.getElementById('strokes');
let par = document.getElementById('par');
let names = ["Hole-in-one!", "Eagle", "Birdie", "Par", "Bogey", "Double Bogey", "Go Home!"];

function golfScore(par, strokes) {
  par = parseInt(par.value);
  strokes = parseInt(strokes.value);
  let message = "";
  if (strokes == 1) {
    message = names[0];
  } else if (strokes <= par - 2) {
    message = names[1];
  } else if (strokes == par - 1) {
    message = names[2];
  } else if (strokes === par) {
    message = names[3];
  } else if (strokes == par + 1) {
    message = names[4];
  } else if (strokes == par + 2) {
    message = names[5];
  } else if (strokes >= par + 3) {
    message = names[6];
  }
  document.getElementById("message").innerHTML = message;
}

<!DOCTYPE html>
<html>
<head>
  <title>Golf Score</title>
</head>

<body>
  <h1>Golf Score</h1>
  <form>
    Strokes: <input type="text" id="strokes"> Par: <input type="text" id="par">
    <button type="button" onclick="golfScore(par, strokes)">How did you do?</button>
  </form>
  <p id="message"> </p>
</body>
</html>

score 0 · Accepted Answer · 2020-09-23 22:15:30Z

The javascript file runs when the HTML is first rendered, and the input boxes are still empty.

You only refer to the input boxes at the beginning of the javascript, so both strokes and par will still be empty (as they receive the value of the empty input boxes).

But if you want the input box values to be checked EVERY time the function is called, you move the definitions into the function

let names = ["Hole-in-one!", "Eagle", "Birdie", "Par", "Bogey", "Double Bogey", "Go Home!"];

function golfScore(par, strokes) {
  // Define strokes and par at the beginning of the function  
  let strokes = parseInt(document.getElementById('strokes').value);
  let par = parseInt(document.getElementById('par').value);

  let out;
  if (strokes == 1) {
    out = names[0];
  } else if (strokes <= par - 2) {
    out = names[1];
  } else if (strokes == par - 1) {
    out = names[2];
  } else if (strokes === par) {
    out = names[3];
  } else if (strokes == par + 1) {
    out = names[4];
  } else if (strokes == par + 2) {
    out = names[5];
  } else if (strokes >= par + 3) {
    out = names[6];
  }
  document.getElementById("message").innerHTML = out;
}

This should work :D

Collectives™ on Stack Overflow

Getting results from a javascript function to display in html element. I can get it to work with console.log(golfScore(4, 3)); but not user input

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