按下按钮时使用Javascript刷新div内容

Question

我试图找出如何根据表单提交的值刷新div的内容。基本上，我有一个HTML表单：

<form method="post" id="diabetestool">
  <table id="tooltable">
    <tr>
      <td>
        <p>How old are you?</p>
      </td>
    <td>
      <input type="radio" id="age1" name="age" value="0" checked>
      <label for="age1">1-25</label>
    </td>
    <td>
      <input type="radio" id="age2" name="age" value="5">
      <label for="age2">26-40</label>
    </td>
    <td>
      <input type="radio" id="age3" name="age" value="8">
      <label for="age3">41-60</label>
    </td>
    <td>
      <input type="radio" id="age4" name="age" value="10">
      <label for="age4">60+</label>
    </td>
  </tr>
  <tr>
    <td colspan="5">
      <button class="btn" type="button" name="submit" onclick="calculate()"><span>Calculate</span></button>
    </td>
  </tr>
</form>

这是它的简单版本..然后我有一个“窗口”，我想在表单中单击提交按钮时显示。

<div class="responsive-centered-box" id="resultWindow" style="display:none">
  <p>sample text</p>
</div>

这是我的Javascript：

function calculate() {
  let resultWindow = document.getElementById("resultWindow");
  let i;
  let age_Value, bmi_Value, family_Value, describe_Value;

  for(i = 1; i <= 4; i++) {
    if (document.getElementById('age' + i).checked)
      age_Value = document.getElementById('age' + i).value;
  }

  if (resultWindow.style.display == 'none') {
    resultWindow.style.display = '';
    console.log(age_Value);
  }
}

它记录了已检查的单选选项的值，它也使“窗口”可见，但它仅适用于第一次单击。

我想拥有它，因为当我单击按钮时，它会给我选中选项的值，但如果我选择另一个选项并再次单击该按钮，我希望看到该值。

希望它有意义，感谢您的帮助！

Answer 1

你的代码运行正常。您只需要更新输出显示是否div最初是否被隐藏。

if (resultWindow.style.display == 'none') {
    resultWindow.style.display = '';
    console.log(age_Value);  // take this out of this block
  }

改为：

if (resultWindow.style.display == 'none') {
    resultWindow.style.display = '';

  }
console.log(age_Value);  // here it will work

Answer 2

你检查是否显示=='无'，但当你再次执行功能时，你忘了重置样式。

function calculate() {
  let resultWindow = document.getElementById("resultWindow");
  resultWindow.style.display = 'none';
  
  let age_Value, bmi_Value, family_Value, describe_Value;

  for(let i = 1; i <= 4; i++) {
    if (document.getElementById('age' + i).checked)
      age_Value = document.getElementById('age' + i).value;
  }

  if (resultWindow.style.display == 'none') {
    resultWindow.style.display = '';
    console.log(age_Value);
  }
}

<form method="post" id="diabetestool">
  <table id="tooltable">
    <tr>
      <td>
        <p>How old are you?</p>
      </td>
    <td>
      <input type="radio" id="age1" name="age" value="0" checked>
      <label for="age1">1-25</label>
    </td>
    <td>
      <input type="radio" id="age2" name="age" value="5">
      <label for="age2">26-40</label>
    </td>
    <td>
      <input type="radio" id="age3" name="age" value="8">
      <label for="age3">41-60</label>
    </td>
    <td>
      <input type="radio" id="age4" name="age" value="10">
      <label for="age4">60+</label>
    </td>
  </tr>
  <tr>
    <td colspan="5">
      <button class="btn" type="button" name="submit" onclick="calculate()"><span>Calculate</span></button>
    </td>
  </tr>
</form>
<div class="responsive-centered-box" id="resultWindow" style="display:none">
  <p>sample text</p>
</div>