CODEWITHSUNDEEP
javascript
JJLX
JJLX

Reputation: 97

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

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>

Upvotes: 0

Views: 80

Answers (3)

gavgrif
gavgrif

Reputation: 15509

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>

Upvotes: 1

Dekel
Dekel

Reputation: 62556

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>

Upvotes: 2

Govinda Rajbhar
Govinda Rajbhar

Reputation: 3034

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.

Upvotes: 0

Related Questions