0
我想在JS中創建整個測驗（並且我必須始終使用不同類型的輸入），我使用eventListener來檢查按鈕的狀態，但是無線電輸入它不起作用。 HTML：buzzquiz - 單選按鈕不返回任何東西
<!DOCTYPE html>
<html lang="en">
<head>
<title>BuzzQuiz</title>
<meta charset="utf-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> -->
<link rel="stylesheet" href="css/stylesheet.css">
<!-- <link rel = "stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> -->
</head>
<body>
<!-- HEADER -->
<!-- START -->
<div>
<img id = "startImg" src = "http://img3.rnkr-static.com/list_img_v2/17520/2317520/C480/rick-and-morty-memes-that-all-fans-will-laugh-at.jpg">
<input type = "submit" id = "startBtn" value = "I am ready!"></input>
</div>
<!-- CONTINUE -->
<script src="js/foo.js"></script>
</body>
</html>
JS：
// are you ready?
document.getElementById("startBtn").addEventListener("click",
(e) => {
document.getElementById("startImg").src = "http://cdn3.thr.com/sites/default/files/2015/07/rick_and_morty_s02_still.jpg";
});
//change text to continue click
document.getElementById("startBtn").addEventListener("click",
(e) => {
var elem = document.getElementById("startBtn");
if (elem.value=="I am ready!") {
elem.value = "Continue";
} else {
var rmvbtn = document.getElementById("startBtn");
rmvbtn.remove();
var rmvimg = document.getElementById("startImg");
rmvimg.remove();
var newDiv = document.createElement("div");
var newStyle = document.createElement("H1");
var firstQuestion = document.createTextNode("What is your name?");
newStyle.appendChild(firstQuestion);
newStyle.setAttribute("id", "question");
var username = document.createElement("INPUT");
username.setAttribute("type", "text");
username.setAttribute("id", "userName");
var btn = document.createElement("BUTTON");
btn.setAttribute("id", "submitName");
var btnText = document.createTextNode("Submit");
btn.appendChild(btnText);
var newPic = document.createElement("IMG");
newPic.setAttribute("id","firstQuePic");
newPic.setAttribute("src", "https://s-media-cache-ak0.pinimg.com/736x/2d/bb/22/2dbb221505762fb32cfec3a21aa9749f.jpg");
newDiv.appendChild(newStyle);
newDiv.appendChild(newPic);
username.appendChild(btn);
newDiv.appendChild(username);
newDiv.appendChild(btn);
document.body.appendChild(newDiv);
document.getElementById("submitName").addEventListener("click",
(e) => {
var ifSubmit = document.getElementById("userName").value;
if (ifSubmit.length!=-1) {
console.log(ifSubmit);
var rmvbtn = document.getElementById("submitName");
rmvbtn.remove();
var rmvform = document.getElementById("userName");
rmvform.remove();
var rmvheader = document.getElementById("question");
rmvheader.remove();
var rmvimg = document.getElementById("firstQuePic");
rmvimg.remove();
var newDivTwo = document.createElement("div");
var newQueStyle = document.createElement("H1");
var secQuestion = document.createTextNode("What is your gender?");
newQueStyle.appendChild(secQuestion);
newQueStyle.setAttribute("id", "question");
var femDiv = document.createElement("div");
var summerGen = document.createElement("IMG");
summerGen.setAttribute("id","summerGender");
summerGen.setAttribute("src", "http://www.aveleyman.com/Gallery/ActorsG/tve146453-3731-20131209-0.jpg");
var fem = document.createElement("INPUT");
fem.setAttribute("id", "female");
fem.setAttribute("type", "radio");
var ans1 = document.createTextNode("Female");
femDiv.setAttribute("id","femaleDiv");
femDiv.appendChild(summerGen);
femDiv.appendChild(ans1);
femDiv.appendChild(fem);
var malDiv = document.createElement("div");
var mortyGen = document.createElement("IMG");
mortyGen.setAttribute("id","mortyGender");
mortyGen.setAttribute("src","https://pbs.twimg.com/profile_images/710449830489890816/ef8uZJqk.jpg");
var male = document.createElement("INPUT");
male.setAttribute("id", "maLe");
male.setAttribute("type", "radio");
var ans2 = document.createTextNode("Male");
malDiv.setAttribute("id","maleDiv");
malDiv.appendChild(mortyGen);
malDiv.appendChild(ans2);
malDiv.appendChild(male);
var hzDiv = document.createElement("div");
var meeseksGen = document.createElement("IMG");
meeseksGen.setAttribute("id", "msGen");
meeseksGen.setAttribute("src", "https://pbs.twimg.com/profile_images/647129820745199616/Yh4fqebK.png");
var hz = document.createElement("INPUT");
hz.setAttribute("id", "hZ");
hz.setAttribute("type", "radio");
var ans3 = document.createTextNode("I don't know");
hzDiv.setAttribute("id","hezeDiv");
hzDiv.appendChild(meeseksGen);
hzDiv.appendChild(ans3);
hzDiv.appendChild(hz);
document.body.appendChild(newDivTwo);
newDivTwo.appendChild(newQueStyle);
newDivTwo.appendChild(femDiv);
newDivTwo.appendChild(malDiv);
newDivTwo.appendChild(hzDiv);
var femAns = document.getElementById("female");
var maleAns = document.getElementById("maLe");
var hzAns = document.getElementById("hZ");
if (femAns.checked) {
alert("FEMALE");
} else if (maleAns.checked) {
alert("male")
};
}; //gender stuff appears
}); //eventListener for gender
}
}); //eventListener for first click
我試圖調試它，可變分配給單選按鈕標識，但警報（作爲測試）不起作用。有什麼建議麼？謝謝！