时间戳

首页 > 解决方案 > 我想选择 2 个不同的输入（单选按钮）并划分它们的值并将结果显示为警报

javascript - 我想选择 2 个不同的输入（单选按钮）并划分它们的值并将结果显示为警报

问题描述

 <form id="payments" >
          <input type="radio" id="firstpay" name="pay" value="999" >
            <label for="firpay">999 €&lt;/label>
            <input type="radio" id="secondpay" name="pay" value="1599" >
            <label for="firpay">1599 €&lt;/label>
            <input type="radio" id="thirdpay" name="pay" value="2999">
            <label for="firpay">2999 €&lt;/label>
         </form>

所以我从这里选择 1 个输入，从下面选择一个：

 <input name="answer" id="answer_1" type="radio" value="0">
            </td>
            <td>
              <input name="answer" id="answer_2" type="radio" value="7">
            </td>
            <td>
              <input name="answer" id="answer_3" type="radio" value="15">
            </td>
            <td>
              <input name="answer" id="answer_4" type="radio" value="24">
            </td>
            <td>
              <input name="answer" id="answer_5" type="radio" value="36">
            </td>
            <td>
              <input name="answer" id="answer_6" type="radio" value="50">

因此，假设我选择带有 id firstpay 的输入，当我从第二种形式中选择其他输入时，我想根据第二个输入获得（ 999 / 0 、 7 、 15 ...）。我希望结果以警报的形式出现

标签： javascripthtmlarrays

解决方案

跟踪支付和回答的价值。
为输入注册“更改”事件，当两个值都可用时显示警报。试试这个片段。

const track = {
  pay: null,
  answer: null,
};

document.querySelectorAll("input").forEach((el) =>
  el.addEventListener("change", (e) => {
    const type = e.target.name;
    const value = e.target.value;
    track[type] = value;

    if (track.pay !== null && track.answer !== null) {
      alert(
        `Avg is ${track.pay} / ${track.answer} = ${track.pay / track.answer}`
      );
    }
  })
);
<form id="payments" >
   <input type="radio" id="firstpay" name="pay" value="999" >
   <label for="firpay">999 €&lt;/label>
   <input type="radio" id="secondpay" name="pay" value="1599" >
   <label for="firpay">1599 €&lt;/label>
   <input type="radio" id="thirdpay" name="pay" value="2999">
   <label for="firpay">2999 €&lt;/label>
</form>


<td>
   <input name="answer" id="answer_1" type="radio" value="0">
</td>
<td>
   <input name="answer" id="answer_2" type="radio" value="7">
</td>
<td>
   <input name="answer" id="answer_3" type="radio" value="15">
</td>
<td>
   <input name="answer" id="answer_4" type="radio" value="24">
</td>
<td>
   <input name="answer" id="answer_5" type="radio" value="36">
</td>
<td>
   <input name="answer" id="answer_6" type="radio" value="50"> 
</td>

推荐阅读