Estoy haciendo algo fuera de mi alcance y me estoy equivocando. Acabo de empezar con JS. 2 cosas principales que no entiendo: 1) ¿Cómo consigo que los Id se ejecuten como argumentos? 2) ¿Cómo obtengo la devolución para ir al document.getElementById.innerHTML?

Gracias por su tiempo.

<!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>
0
DevJ5 17 feb. 2017 a las 15:39

3 respuestas

La mejor respuesta

En lugar de tratar de pasar los valores de onclick, tenga una función que obtenga los valores de las entradas y luego otra función que devuelva el resultado de esa función y permita que el contenido se coloque en la p. Siempre es mejor separar la función (javascript) de la estructura (HTML) en su código.

Tenga en cuenta que ni siquiera necesita la segunda función; todo esto podría hacerse en una función y el texto actualizado, pero dado que me preguntó sobre pasar valores como argumentos a una función, pensé que le daría eso en mi respuesta.

También tenga en cuenta que modifiqué un poco sus entradas (siempre debe tener una etiqueta para las entradas y también en el js), debe analizar los valores en números antes de compararlos / calcularlos. Todas las entradas (incluso las entradas type = "number" dan cadenas como sus salidas, por lo que debe analizarlas en números.

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>
1
gavgrif 17 feb. 2017 a las 12:59

Deberá pasar los valores de entrada como parámetros

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

Intenta con esto.

0
Govinda Rajbhar 17 feb. 2017 a las 12:42

Estás jugando un poco con la sintaxis de jquery.

Aquí está la solución de lo que está tratando de hacer:

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>
2
Dekel 17 feb. 2017 a las 12:42