时间戳

首页 > 解决方案 > 使用 JavaScript 创建一个带有按钮的多项选择题和一个文本问题

javascript - 使用 JavaScript 创建一个带有按钮的多项选择题和一个文本问题

问题描述

我正在学习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 链接
我将非常感谢您的帮助或建议。

标签： javascripthtmlcss

解决方案

好的，所以我想我已经实现了您的要求。沙箱供参考：https ://codesandbox.io/s/flamboyant-kate-4kl3z?file=/index.html

有几次你的目标是 id 不存在的 div，所以请确保仔细检查命名等。就像@displacedtexan 所说的表格很可能不需要，我把它留在那里，只是将input类型更改为button而不是submit. 如果需要更多帮助，请随时发表评论。

推荐阅读