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 个答案: