如何使用JavaScript將結果顯示在性格測驗中？

Question

我正在做一個問題性格測驗，它將在單擊提交后提醒用戶其性格。 我的表單在單擊用戶喜歡的咖啡后告訴用戶他們的個性。 我是JavaScript的初學者，因此不確定使用單選按鈕時要使用哪種功能。 是否發出alert（“”）; 有最大字數？ 有沒有更好的方法來顯示冗長的個性結果？

謝謝。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Coffee with Coincidence</title>
  <link rel="stylesheet" type="text/css" href="coffee.css">
</head>

<body>
  <form id="CoffeeForm" onsubmit="return getResults()" method="post">
    <table>
      <tr>
        <td>Cappuccino</td>
        <td><input type="radio" name="coffee" value="cappuccino" id="cappuccino"></td>
      </tr>
      <tr>
        <td>Caffè Americano</td>
        <td><input type="radio" name="coffee" value="caffèamericano" id="caffeamericano"></td>
      </tr>
      <tr>
        <td>Latte</td>
        <td><input type="radio" name="coffee" value="latte" id="latte"></td>
      </tr>
      <tr>
        <td>Espresso</td>
        <td><input type="radio" name="coffee" value="espresso" id="espresso">
          <td>
      </tr>
      <tr>
        <td>Caffè mocha</td>
        <td><input type="radio" name="coffee" value="caffèmocha" id="caffemocha"></td>
      </tr>
      <tr>
        <td><input type="Submit" value="Results!"></td>
      </tr>
    </table>
  </form>
  <script src="coffeeScripts.js"></script>
</body>

</html>

如果選擇了卡布奇諾咖啡，這是JavaScript的失敗測試。

function getResults() {
  var x = document.getElementById("cappuccino");

  if (x == "checked") {
    alert("Cappuccino personality goes here");
    return false;
  }
}

Answer 1

您可以使用innerHTML設置HTML元素的內容。 用戶完成測驗后，您可以將所需的答案返回到HTML元素。

HTML

<p id="result"></p>

JavaScript的

const result = document.getElementById('result');
const answer = "Cappuccino personality goes here";
result.innerHTML = answer;

Answer 2

通過警報顯示個性詳細信息

您可以僅使用選擇器來選擇已選中的輸入，然后使用其值知道它是什么。

 function getResults() { var x = document.querySelector("input:checked"); switch (x.value) { case "cappuccino": alert("Cappuccino personality goes here"); break; case "caffèamericano": alert("Caffèamericano personality goes here"); break; case "latte": alert("Latte personality goes here"); break; case "espresso": alert("Espresso personality goes here"); break; case "caffèmocha": alert("Caffèmocha personality goes here"); break; default: } return false; }

 <form id="CoffeeForm" onsubmit="return getResults()" method="post"> <table> <tr> <td>Cappuccino</td> <td><input type="radio" name="coffee" value="cappuccino" id="cappuccino"></td> </tr> <tr> <td>Caffè Americano</td> <td><input type="radio" name="coffee" value="caffèamericano" id="caffeamericano"></td> </tr> <tr> <td>Latte</td> <td><input type="radio" name="coffee" value="latte" id="latte"></td> </tr> <tr> <td>Espresso</td> <td><input type="radio" name="coffee" value="espresso" id="espresso"> <td> </tr> <tr> <td>Caffè mocha</td> <td><input type="radio" name="coffee" value="caffèmocha" id="caffemocha"></td> </tr> <tr> <td><input type="Submit" value="Results!"></td> </tr> </table> </form>

通過div顯示個性詳細信息

如果要在HTML中顯示個性詳細信息，則可以使用div。

 function getResults() { var hidden_divs = document.querySelectorAll(".hidden-div"); for (var i = 0; i < hidden_divs.length; i++) { hidden_divs[i].style.display = "none"; } var x = document.querySelector("input:checked"); var display_div = document.getElementsByName(x.value)[0].style.display = "block"; return false; }

  .hidden-div{ display: none; }

 <form id="CoffeeForm" onsubmit="return getResults()" method="post"> <table> <tr> <td>Cappuccino</td> <td><input type="radio" name="coffee" value="cappuccino" id="cappuccino"></td> </tr> <tr> <td>Caffè Americano</td> <td><input type="radio" name="coffee" value="caffèamericano" id="caffeamericano"></td> </tr> <tr> <td>Latte</td> <td><input type="radio" name="coffee" value="latte" id="latte"></td> </tr> <tr> <td>Espresso</td> <td><input type="radio" name="coffee" value="espresso" id="espresso"> <td> </tr> <tr> <td>Caffè mocha</td> <td><input type="radio" name="coffee" value="caffèmocha" id="caffemocha"></td> </tr> <tr> <td><input type="Submit" value="Results!"></td> </tr> </table> </form> <div class="Personality-text-div"> <div name="cappuccino" class="hidden-div"> <strong>Cappuccino</strong><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div name="affèamericano" class="hidden-div"> <strong>Affèamericano</strong><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div name="latte" class="hidden-div"> <strong>Latte</strong><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div name="espresso" class="hidden-div"> <strong>Espresso</strong><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div name="caffèmocha" class="hidden-div"> <strong>Caffèmocha</strong><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div>

如何使用JavaScript將結果顯示在性格測驗中？

問題描述

2 個解決方案

解決方案1
0 2018-10-15 23:42:15

解決方案2
0 2018-10-16 00:24:40

如何使用JavaScript將結果顯示在性格測驗中？

問題描述

2 個解決方案

解決方案1 0 2018-10-15 23:42:15

解決方案2 0 2018-10-16 00:24:40

解決方案1
0 2018-10-15 23:42:15

解決方案2
0 2018-10-16 00:24:40