使用JavaScript创建带有按钮的选择题和文本问句
使用JavaScript创建带有按钮的选择题和文本问句
提问于 2021-09-09 20:11:35
我正在学习javascript，我只是一个新手。我想提出两个简单的问题。第一种是带有按钮的多重选择，第二种是文本问题。这是我的index.html
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<title>Trivia!</title>
<script>
function displayAnswer1() {
if (document.getElementById('option-11').checked) {
document.getElementById('block-11').style.border = '3px solid red'
document.getElementById('result-11').style.background = 'red'
document.getElementById('result-11').innerHTML = 'Incorrect!!'
}
if (document.getElementById('option-12').checked) {
document.getElementById('block-12').style.border = '3px solid red'
document.getElementById('result-12').style.background = 'red'
document.getElementById('result-12').innerHTML = 'Incorrect!'
showCorrectAnswer4()
}
if (document.getElementById('option-13').checked) {
document.getElementById('block-13').style.border = '3px solid red'
document.getElementById('result-13').style.background = 'red'
document.getElementById('result-13').innerHTML = 'Incorrect!'
showCorrectAnswer4()
}
if (document.getElementById('option-14').checked) {
document.getElementById('block-14').style.border = '3px solid limegreen'
document.getElementById('result-14').style.background = 'limegreen'
document.getElementById('result-14').innerHTML = 'Correct!!'
showCorrectAnswer4()
}
}
function showCorrectAnswer4() {
let showAnswer4 = document.createElement('p')
showAnswer1.innerHTML = 'Show Corrent Answer'
showAnswer1.style.position = 'relative'
showAnswer1.style.top = '-180px'
showAnswer1.style.fontSize = '1.75rem'
document.getElementById('showanswer4').appendChild(showAnswer4)
showAnswer1.addEventListener('click', () => {
document.getElementById('block-14').style.border = '3px solid limegreen'
document.getElementById('result-14').style.background = 'limegreen'
document.getElementById('result-14').innerHTML = 'Correct!'
document.getElementById('showanswer4').removeChild(showAnswer4)
})
}
function myfun(){
var v1=document.getElementById('form').elements[0].value;
console.log('came',v1,)
if(v1=="Blue"){
v1.style.color='green';
v1.innerHTML = 'Correct!'
}
else {
v1.style.color='red';
v1.innerHTML = 'Incorrect!'
}
}
</script>
</head>
<body>
<div class="jumbotron">
<h1>Trivia!</h1>
</div>
<div class="container">
<div class="section">
<h2>Part 1: Multiple Choice </h2>
<hr>
<h3>What is my first name?</h3>
<form method='GET'>
<span id='block-11' style='padding: 10px;'>
<label for='option-11' style=' padding: 5px; font-size: 2.5rem;'>
<input type='submit' value='Zahra' id='option-11' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' onclick="displayAnswer1()"/>
</label>
<span id='result-11'></span>
</span>
<span id='block-12' style='padding: 10px;'>
<label for='option-12' style=' padding: 5px; font-size: 2.5rem;'>
<input type='submit' value='Melika' id='option-12' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' onclick="displayAnswer1()"/>
</label>
<span id='result-12'></span>
</span>
<span id='block-12' style='padding: 10px;'>
<label for='option-13' style=' padding: 5px; font-size: 2.5rem;'>
<input type='submit' value='Aysa' id='option-13' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' onclick="displayAnswer1()"/>
</label>
<span id='result-13'></span>
</span>
<span id='block-12' style='padding: 10px;'>
<label for='option-14' style=' padding: 5px; font-size: 2.5rem;'>
<input type='submit' value='Aylin' id='option-14' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' onclick="displayAnswer1()"/>
</label>
<span id='result-14'></span>
</span>
</form>
</div>
<div class="section">
<h2>Part 2: Free Response</h2>
<hr>
<h3>What is my favorite color?</h3>
<form id="form">
<input type="text" name="q">
<input type="submit" value="Check Answer" onclick="myfun()">
</form>
</div>
</div>
</body>
</html>这是我的style.css
body {
background-color: #fff;
color: #212529;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
margin: 0;
text-align: left;
}
.container {
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
}
.jumbotron {
background-color: #477bff;
color: #fff;
margin-bottom: 2rem;
padding: 2rem 1rem;
text-align: center;
}
.section {
padding: 0.5rem 2rem 1rem 2rem;
}
.section:hover {
background-color: #f5f5f5;
transition: color 2s ease-in-out, background-color 0.15s ease-in-out;
}
h1 {
font-family: 'Montserrat', sans-serif;
font-size: 48px;
}
button, input[type="submit"] {
background-color: #d9edff;
border: 1px solid transparent;
border-radius: 0.25rem;
font-size: 0.95rem;
font-weight: 400;
line-height: 1.5;
padding: 0.375rem 0.75rem;
text-align: center;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
vertical-align: middle;
}
input[type="text"] {
line-height: 1.8;
width: 25%;
}
input[type="text"]:hover {
background-color: #f5f5f5;
transition: color 2s ease-in-out, background-color 0.15s ease-in-out;
}对于多个选择问题，我想要的是，当用户单击正确的答案时，按钮的颜色会以绿色变化，并且在问题下面会显示像更正！这样的消息，如果用户选择了错误的按钮，那么它的颜色就会变成红色，并带有不正确的消息。对于下一个问题，如果用户写出了正确的答案，我希望将文本的颜色更改为绿色，并向用户显示一个正确的消息。
我的第一个问题是，为什么在第一个问题中点击正确或错误的答案后，按钮的颜色不会改变？还有为什么没有显示innerHTML的文本？我的第二个问题也有同样的问题，即它没有显示消息，也没有改变在input中编写的文本的颜色。CodePen链路
我将非常感谢你的帮助或建议。
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-09-09 21:13:39
好吧，我想我已经达到你的要求了。参考沙箱：https://codesandbox.io/s/flamboyant-kate-4kl3z?file=/index.html
有几次，您的目标是不存在ids的did，所以只需确保重复检查命名等等。就像@displacedtexan所说的，表单很可能不需要，我把它放在那里，只将input类型更改为button而不是submit。如果需要更多的帮助，可以随意评论。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69124209
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号