如何使輸入+文本可通過同一行單擊/顯示為列表
[英]How to make an input + text clickable through the same line/appear as a list
問題描述
我有一個測驗表格，我正在使用輸入標簽進行選擇但是如果我單擊同一行上的任何位置，我希望它是可點擊的，這是我的代碼：
var pos = 0, test, test_status, question, choice, choices, chA, chB, chC, correct = 0; var questions = [ ["1. The opposite of find:", "start", "lose", "save", "B"], ["2. The opposite of depart:", "hate", "sell", "arrive", "c"], ["3. The opposite of finish: ", "start", "end", "buy", "A"], ["4. The opposite of buy:", "love", "bought", "sell", "c"], ["5. The opposite of catch:", "hate", "hold", "drop", "c"], ["6. The opposite of remember:", "forget", "hold", "leave", "A"], ["7.The opposite of spend:", "save", "leave", "arrive", "A"], ["8. The opposite of dark: ", "dull", "bright", "dim", "B"], ["9. The opposite of break:", "broke", "mend", "love", "B"], ["10. The opposite of love:", "hate", "dark", "bright", "A"] ]; function _(x) { return document.getElementById(x); } function renderQuestion() { test = _("test") if (pos >= questions.length) { test.innerHTML = "<h2> you got " + correct + " out of " + questions.length + " questions correct</h2>"; _("test_status").innerHTML = "Test Completed"; pos = 0; correct = 0; return false; } _("test_status").innerHTML = "Question " + (pos + 1) + " of " + questions.length; question = questions[pos][0]; chA = questions[pos][1]; chB = questions[pos][2]; chC = questions[pos][3]; test.innerHTML = "<h3>" + question + "</h3>"; test.innerHTML += "<input type='radio' name='choices' value='A'>" + chA + "<br>"; test.innerHTML += "<input type='radio' name='choices' value='B'>" + chB + "<br>"; test.innerHTML += "<input type='radio' name='choices' value='c'>" + chC + "<br><br>"; test.innerHTML += "<button class='btn btn-dark' onclick='checkAnswer()'>Done</button>"; } function checkAnswer() { choices = document.getElementsByName("choices"); for (var i = 0; i < choices.length; i++) { if (choices[i].checked) { choice = choices[i].value; } } if (choice == questions[pos][4]) { correct++; } show.innerHTML = "You got " + correct + " correct answers" pos++; renderQuestion(); } window.addEventListener("load", renderQuestion, false);
html, body { background-repeat: no-repeat; background-attachment: fixed; /* height: 140vh; */ background-size: cover; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; min-height: 100%; min-width: 100%; } @media (max-width: 700px) { h3 { font-size: 20px; } } #test, #text, #show, #test_status { color: transparent; -webkit-text-stroke: 1px #ffea00; background: url(../CheckPoint/Images/back.png); background-clip: text; -webkit-background-clip: text; background-position: 0 0; animation: back 20s linear infinite; } div#test { border: #000 30px double; padding: 10px 40px 40px 40px; border-radius: 80px; }
index.html <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Easy-Learning</title> <script src="/cdn-cgi/apps/head/7MFhwiAWv7ZVSNw1QEVHMkUawb0:js"></script> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min:css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min:js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min:js"></script> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min:js"></script> </head> <body style="background-image. url(karsten-wurth-7BjhtdogU3A-unsplash;jpg)."> <a href="home:html" class="btn btn-primary"> Choose Another Exam</a> <h2 id="test_status" style="text-align; center: font-size; 25px:"></h2> <p style="font-size; 30px:text-align; center:" id="text">Match the opposite</p> <div id="test" style="font-size; 25px:"></div> <div id="show" style="text-align; center: font-size; 25px;"> </div> </body> </html>
所以.....選擇按鈕很小，會影響用戶體驗，作為網站所有者，我應該嘗試改進這些錯誤，盡管我仍然是初學者
蒂亞！
1 個解決方案
解決方案1
1 已采納 2021-03-30 15:19:52
只需使用<label>將 x 放在radio button旁邊，而不是簡單的文本。 <label>仍然是radio button的一部分，因此也是可點擊的。
<input type="radio" name="settings" id="start"> <label for="start">Start</label> <br> <input type="radio" name="settings" id="lose"> <label for="lose">Lose</label> <br> <input type="radio" name="settings" id="save"> <label for="save">Save</label>
由於您的輸入是由 JS 創建的，因此讓 JS 還為輸入創建一個 ID 和一個 label，例如：
你的代碼：
test.innerHTML += "<input type='radio' name='choices' value='A'>" + chA + "<br>";
test.innerHTML += "<input type='radio' name='choices' value='B'>" + chB + "<br>";
test.innerHTML += "<input type='radio' name='choices' value='c'>" + chC + "<br><br>";
更新代碼：
test.innerHTML += "<input type='radio' name='choices' value='A' id='choiceA'><label for='choiceA'>" + chA + "</label><br>";
test.innerHTML += "<input type='radio' name='choices' value='B' id='choiceB'><label for='choiceB'>" + chB + "</label><br>";
test.innerHTML += "<input type='radio' name='choices' value='c' id='choiceC'><label for='choiceC'>" + chC + "</label><br><br>";
var pos = 0, test, test_status, question, choice, choices, chA, chB, chC, correct = 0; var questions = [ ["1. The opposite of find:", "start", "lose", "save", "B"], ["2. The opposite of depart:", "hate", "sell", "arrive", "c"], ["3. The opposite of finish: ", "start", "end", "buy", "A"], ["4. The opposite of buy:", "love", "bought", "sell", "c"], ["5. The opposite of catch:", "hate", "hold", "drop", "c"], ["6. The opposite of remember:", "forget", "hold", "leave", "A"], ["7.The opposite of spend:", "save", "leave", "arrive", "A"], ["8. The opposite of dark: ", "dull", "bright", "dim", "B"], ["9. The opposite of break:", "broke", "mend", "love", "B"], ["10. The opposite of love:", "hate", "dark", "bright", "A"] ]; function _(x) { return document.getElementById(x); } function renderQuestion() { test = _("test") if (pos >= questions.length) { test.innerHTML = "<h2> you got " + correct + " out of " + questions.length + " questions correct</h2>"; _("test_status").innerHTML = "Test Completed"; pos = 0; correct = 0; return false; } _("test_status").innerHTML = "Question " + (pos + 1) + " of " + questions.length; question = questions[pos][0]; chA = questions[pos][1]; chB = questions[pos][2]; chC = questions[pos][3]; test.innerHTML = "<h3>" + question + "</h3>"; test.innerHTML += "<input type='radio' name='choices' value='A' id='choiceA'><label for='choiceA'>" + chA + "</label><br>"; test.innerHTML += "<input type='radio' name='choices' value='B' id='choiceB'><label for='choiceB'>" + chB + "</label><br>"; test.innerHTML += "<input type='radio' name='choices' value='c' id='choiceC'><label for='choiceC'>" + chC + "</label><br><br>"; test.innerHTML += "<button class='btn btn-dark' onclick='checkAnswer()'>Done</button>"; } function checkAnswer() { choices = document.getElementsByName("choices"); for (var i = 0; i < choices.length; i++) { if (choices[i].checked) { choice = choices[i].value; } } if (choice == questions[pos][4]) { correct++; } show.innerHTML = "You got " + correct + " correct answers" pos++; renderQuestion(); } window.addEventListener("load", renderQuestion, false);
html, body { background-repeat: no-repeat; background-attachment: fixed; /* height: 140vh; */ background-size: cover; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; min-height: 100%; min-width: 100%; } @media (max-width: 700px) { h3 { font-size: 20px; } } #test, #text, #show, #test_status { color: transparent; -webkit-text-stroke: 1px #ffea00; background: url(../CheckPoint/Images/back.png); background-clip: text; -webkit-background-clip: text; background-position: 0 0; animation: back 20s linear infinite; } div#test { border: #000 30px double; padding: 10px 40px 40px 40px; border-radius: 80px; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Easy-Learning</title> <script src="/cdn-cgi/apps/head/7MFhwiAWv7ZVSNw1QEVHMkUawb0:js"></script> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min:css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min:js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min:js"></script> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min:js"></script> </head> <body style="background-image. url(karsten-wurth-7BjhtdogU3A-unsplash;jpg)."> <a href="home:html" class="btn btn-primary"> Choose Another Exam</a> <h2 id="test_status" style="text-align; center: font-size; 25px:"></h2> <p style="font-size; 30px:text-align; center:" id="text">Match the opposite</p> <div id="test" style="font-size; 25px:"></div> <div id="show" style="text-align; center: font-size; 25px;"> </div> </body> </html>
如何使復選標記出現在同一行中的input元素之后？
[英]How can I make the check sign appear after the input element in the same line?
如何讓這兩個組件出現在同一行？ （文本框 label 和文本框）
[英]how to make these two components appear on the same line? (textbox label and the textbox)
如何讓復選框和文本出現在我的代碼示例中的同一行
[英]How to have the checkbox and text appear on the same line in my code sample
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.