Getting the onclick event to run a function and outputting it in an html element

Question

Im doing something way out my league and Im messing up. I just started with JS. 2 main things I dont understand: 1) How do i get the Id's to run as arguments? 2) How do i get the return to go into the document.getElementById.innerHTML?

Thank you for your time.

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>Golf</title>
	<style>

	</style>


</head>	
<body>
	Strokes: <input id="strokeset">
	Par: <input id="parset">
	<button onclick="golfScore('#strokeset','#parset')">klik</button>
	
	<p id="demo">should be here</p>
</body>
	<script>
	
function golfScore(par,strokes) {
  if (strokes == 1) {
    return "Hole-in-one!";
  } else if (strokes <= par - 2) {
    return "Eagle";
  } else if (strokes <= par -1) {
    return "Birdie";
  } else if (strokes == par) {
    return "Par";
  } else if (strokes == par + 1) {
    return "Bogey";
  } else if (strokes == par + 2) {
    return "Double Bogey";
  } else {
    return "Go Home!";
  }
  document.getElementById("demo").innerHTML;
}
  
	

	</script>
</html>

Dekel · Accepted Answer · 2017-02-17 12:42:47Z

2

You are messing a bit with the syntax of jquery.

Here is the fix of what you are trying to do:

function golfScore(par,strokes) {
  par = document.getElementById(par).value;
  strokes = document.getElementById(strokes).value;
  t = ''
  if (strokes == 1) {
    t = "Hole-in-one!";
  } else if (strokes <= par - 2) {
    t = "Eagle";
  } else if (strokes <= par -1) {
    t = "Birdie";
  } else if (strokes == par) {
    t = "Par";
  } else if (strokes == par + 1) {
    t = "Bogey";
  } else if (strokes == par + 2) {
    t = "Double Bogey";
  } else {
    t = "Go Home!";
  }
  document.getElementById("demo").innerHTML = t;
}

Strokes: <input id="strokeset">
Par: <input id="parset">
<button onclick="golfScore('strokeset','parset')">klik</button>

<p id="demo">should be here</p>

answered Feb 17, 2017 at 12:42

Dekel

62.9k12 gold badges109 silver badges130 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

gavgrif · Accepted Answer · 2017-02-17 12:59:01Z

Rather than trying to pass the values from the onclick- have one function that gets the values from the inputs and then another function that returns the result from that function and allows the content to be put into the p. Its always better to separate the function (javascript) from the structure (HTML) in your code.

Note that you don't even need the second function - this could all be done in the one function and the text updated, but since you asked about passing values as arguments to a function - I thought I would give you that in my answer.

Also note that I altered your inputs a bit - you should always have a label for inputs and also in the js - you have to parse the values into numbers before comparing / calculating with them. All inputs (even type="number" inputs give strings as their outputs - so you need to parse them into numbers.

function golfScore() {
  var strokes = parseInt(document.getElementById('strokeset').value);
  var par = parseInt(document.getElementById('parset').value);
  document.getElementById("demo").innerHTML = setText(strokes,par)
}

function setText(strokes,par){
  if (strokes == 1) {
    return "Hole-in-one!";
  } else if (strokes <= par - 2) {
    return "Eagle";
  } else if (strokes <= par -1) {
    return "Birdie";
  } else if (strokes == par) {
    return "Par";
  } else if (strokes == par + 1) {
    return "Bogey";
  } else if (strokes == par + 2) {
    return "Double Bogey";
  } else {
    return "Go Home!";
  }
 }

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Golf</title>

</head>	
<body>
  <label for = "strokeset">Strokes: </label>
  <input id = "strokeset" name = "strokeset" type="text">
  
  <label for = "parset">Par: </label>
  <input id="parset" name = "parset" type = "text">
  
	<button type = "button" onclick="golfScore()">klik</button>
	
	<p id="demo"></p>
</body>

</html>

Govinda Rajbhar · Accepted Answer · 2017-02-17 12:42:44Z

0

You will have to pass input values as parameters

<button onclick="golfScore(document.getElementById('strokeset').value,document.getElementById('parset').value)">klik</button>

Try with this.

answered Feb 17, 2017 at 12:42

Govinda Rajbhar

3,0476 gold badges42 silver badges64 bronze badges

Collectives™ on Stack Overflow

Getting the onclick event to run a function and outputting it in an html element

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