我有一个内部有两个意见的选择器列表。如果选择第一个，我想运行一个代码块，如果选择另一个代码，我想运行不同的代码。我已经使用了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>
答案 0 :(得分：0)
您需要选择如下所示的性别！
首先为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");
}
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";
}
} <!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>
<!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>
答案 1 :(得分：0)
更改选择框所选项目时，使用onchange="chooseFortune()"调用该功能。并且为select而不是option
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";
}
}body {
margin: 0;
}<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>