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

【问题标题】：Refresh div content with Javascript when button is pressed按下按钮时使用 Javascript 刷新 div 内容
【发布时间】：2018-03-05 12:00:43
【问题描述】：

我试图弄清楚如何根据从表单提交的值刷新 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);
  }
}

它记录选中的单选选项的值，它还使“窗口”可见，但它仅适用于第一次点击..

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

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

【问题讨论】：

标签： javascript html forms onclick

【解决方案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

【讨论】：

【解决方案2】：

您检查是否显示 == 'none' 但是当您再次执行函数时您忘记重置样式。

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>

【讨论】：