Question

我有一个内部有两个意见的选择器列表。如果选择第一个，我想运行一个代码块，如果选择另一个代码，我想运行不同的代码。我已经使用了if else。

到目前为止，我已经为每个选择意见分配了一个值，并且代码有效，但如果我选择意见二，则不会改变...

我在这里做错了什么？

< script type = "text/javascript" >

  window.onload = checkGender;

function checkGender() {
  document.getElementById("btnFortune").onclick = chooseFortune;
}

function chooseFortune() {

  if (document.getElementById("male").value === "1") {

    var name = document.getElementById("name").value;
    var formulaMale = name.length * document.getElementById("age").value - document.getElementById("height").value;


    document.getElementById("fortuneTxt").innerHTML = formulaMale;

  } else {
    document.getElementById("fortuneTxt").innerHTML = "Test";
  }
} <
/script>

<!DOCTYPE html>
<html>

<head>
  <title>Spådom</title>
  <meta charset="utf-8">

  <body>
    <h1>Fortune teller</h1>
    <input type="text" id="name" placeholder="Tell me your name.."><br/>
    <input type="number" id="age" placeholder="Your age.."><br/>
    <input type="number" id="height" placeholder="And height..(in cm)"><br/>
    <select>
	<option id="male" value="1">Male</option>
	<option id="female" value="2">Female</option>
</select><br/>
    <button type="button" id="btnFortune">Tell me my fortune!</button>
    <p id="fortuneTxt"></p>
  </body>

</html>

<!DOCTYPE html>
<html>
<head>
	<title>Spådom</title>
	<meta charset="utf-8">
	
	<script type="text/javascript">
		
	window.onload = checkGender;

	function checkGender() {
		document.getElementById("btnFortune").onclick = chooseFortune;
	}

	function chooseFortune() {

		if (document.getElementById("male").value === "1") {

			var name = document.getElementById("name").value;
			var formulaMale = name.length * document.getElementById("age").value - document.getElementById("height").value;


		document.getElementById("fortuneTxt").innerHTML = formulaMale;

		}

		else {
			document.getElementById("fortuneTxt").innerHTML = "Test";
		}
	}
	</script>

</head>
<body>
<h1>Fortune teller</h1>


<style type="text/css">
	
</style>


<input type="text" id="name" placeholder="Tell me your name.."><br/>
<input type="number" id="age" placeholder="Your age.."><br/>
<input type="number" id="height" placeholder="And height..(in cm)"><br/>
<select>
	<option id="male" value="1">Male</option>
	<option id="female" value="2">Female</option>
</select><br/>
<button type="button" id="btnFortune">Tell me my fortune!</button>
<p id="fortuneTxt"></p>
</body>
</html>

Answer 1

您需要选择如下所示的性别！

首先为select元素分配ID，如。

<select id="gender">
    <option id="male" value="1">Male</option>
    <option id="female" value="2">Female</option>
</select>

然后使用以下javascript行，您可以获得所选值！

  var select = document.getElementById("gender");
  if (select.options[select.selectedIndex].value === "1") {
      console.log("Male");
  }else{
      console.log("Female");
  }

＆＃13;

  window.onload = checkGender;

function checkGender() {
  document.getElementById("btnFortune").onclick = chooseFortune;
}

function chooseFortune() {
  var select = document.getElementById("gender");
  if (select.options[select.selectedIndex].value === "1") {

    var name = document.getElementById("name").value;
    var formulaMale = name.length * document.getElementById("age").value - document.getElementById("height").value;


    document.getElementById("fortuneTxt").innerHTML = formulaMale;

  } else {
    document.getElementById("fortuneTxt").innerHTML = "Test";
  }
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>Spådom</title>
  <meta charset="utf-8">

  <body>
    <h1>Fortune teller</h1>
    <input type="text" id="name" placeholder="Tell me your name.."><br/>
    <input type="number" id="age" placeholder="Your age.."><br/>
    <input type="number" id="height" placeholder="And height..(in cm)"><br/>
    <select id="gender">
	<option id="male" value="1">Male</option>
	<option id="female" value="2">Female</option>
</select><br/>
    <button type="button" id="btnFortune">Tell me my fortune!</button>
    <p id="fortuneTxt"></p>
  </body>

</html>

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>Spådom</title>
  <meta charset="utf-8">

  <script type="text/javascript">
    window.onload = checkGender;

    function checkGender() {
      document.getElementById("btnFortune").onclick = chooseFortune;
    }

    function chooseFortune() {

      var select = document.getElementById("gender");
      if (select.options[select.selectedIndex].value === "1") {

        var name = document.getElementById("name").value;
        var formulaMale = name.length * document.getElementById("age").value - document.getElementById("height").value;


        document.getElementById("fortuneTxt").innerHTML = formulaMale;

      } else {
        document.getElementById("fortuneTxt").innerHTML = "Test";
      }
    }
  </script>

</head>

<body>
  <h1>Fortune teller</h1>


  <style type="text/css">

  </style>


  <input type="text" id="name" placeholder="Tell me your name.."><br/>
  <input type="number" id="age" placeholder="Your age.."><br/>
  <input type="number" id="height" placeholder="And height..(in cm)"><br/>
  <select id="gender">
	<option id="male" value="1">Male</option>
	<option id="female" value="2">Female</option>
</select><br/>
  <button type="button" id="btnFortune">Tell me my fortune!</button>
  <p id="fortuneTxt"></p>
</body>

</html>

＆＃13;

Answer 2

更改选择框所选项目时，使用onchange="chooseFortune()"调用该功能。并且为select而不是option

提供ID

＆＃13;

function chooseFortune() {

  if (document.getElementById("gender").value == "1") {
    var name = document.getElementById("name").value;
    var formulaMale = name.length * document.getElementById("age").value - document.getElementById("height").value;
    document.getElementById("fortuneTxt").innerHTML = formulaMale;

  } else {
    document.getElementById("fortuneTxt").innerHTML = "Test";
  }
}

＆＃13;

body {
  margin: 0;
}

＆＃13;

<h1>Fortune teller</h1>
<input type="text" id="name" placeholder="Tell me your name.."><br/>
<input type="number" id="age" placeholder="Your age.."><br/>
<input type="number" id="height" placeholder="And height..(in cm)"><br/>
<select id="gender" onchange="chooseFortune()">
	<option value="1">Male</option>
	<option value="2">Female</option>
</select><br/>
<button type="button" id="btnFortune">Tell me my fortune!</button>
<p id="fortuneTxt"></p>

＆＃13;

在选择列表中选择不同意见时，代码不会更改

2 个答案: