javascript - 如何在每个输入下方显示值，Javascript

Question

我有乘法输入，并且有显示结果的功能。我希望该结果显示在每个输入下方，这是 HTML

 <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>           
           </div>
           <div class="col-md-6">
            <h3>Број на рати:</h3>
            <img src="assets/Images/line.png" width="187px" class="responsive">
            <form id="reponses">
              <table style="width: -webkit-fill-available;">
                <tbody>
                  <tr>
                    <td>
                      <label for="answer_1">Наеднаш</label>
                    </td>
                    <td>
                      <label for="answer_2">7 рати</label> 
                    </td>
                    <td>
                      <label for="answer_3">15 рати</label>
                    </td>
                    <td>
                      <label for="answer_4">24 рати</label>
                    </td>
                    <td>
                      <label for="answer_5">36 рати </label>
                    </td>
                    <td>
                      <label for="answer_6">50 рати </label>
                    </td>
 <input name="answer" id="answer_1" type="radio" value="0">
                  <br>
                  <span id="theresult1"></span>
                </td>
                <td>
                  <input name="answer" id="answer_2" type="radio" value="7" >
                  <br>
                  <span id="theresult2"></span>
                </td>
                <td>
                  <input name="answer" id="answer_3" type="radio" value="15">
                  <br>
                  <span id="theresult3"></span>
                </td>
                <td>
                  <input name="answer" id="answer_4" type="radio" value="24">
                  <br>
                  <span id="theresult4"></span>
                </td>
                <td>
                  <input name="answer" id="answer_5" type="radio" value="36">
                  <br>
                  <span id="theresult5"></span>
                </td>

这是我使用 Javascript 的逻辑

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) {
      
        // return `${track.pay / track.answer}`;
        document.getElementById("theresult1").innerHTML=`${track.pay / track.answer}`
        
       
        console.log(answer)
       


      }
    })
  );

使用此逻辑，我的结果仅显示在第一个输入中我不知道如何使代码仅在选中的输入中显示结果

标签： javascripthtml

Answer 1

解决这个问题。如果有人需要，这是解决方案

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) {
      if(value == '0'){
        document.getElementById('theresult1').innerHTML=Math.round(track.pay / track.answer)
        document.getElementById('theresult1').style.display = 'block';
        document.getElementById('theresult2').style.display = 'none';
        document.getElementById('theresult3').style.display = 'none';
        document.getElementById('theresult4').style.display = 'none';
        document.getElementById('theresult5').style.display = 'none';
        document.getElementById('theresult6').style.display = 'none';
      } else if(value == '7'){
        document.getElementById('theresult2').innerHTML=Math.round(track.pay / track.answer)
        document.getElementById('theresult2').style.display = 'block';
        document.getElementById('theresult1').style.display = 'none';
        document.getElementById('theresult3').style.display = 'none';
        document.getElementById('theresult4').style.display = 'none';
        document.getElementById('theresult5').style.display = 'none';
        document.getElementById('theresult6').style.display = 'none';
      } else if(value == '15') {
        document.getElementById('theresult3').innerHTML=Math.round(track.pay / track.answer)
        document.getElementById('theresult3').style.display = 'block';
        document.getElementById('theresult1').style.display = 'none';
        document.getElementById('theresult2').style.display = 'none';
        document.getElementById('theresult4').style.display = 'none';
        document.getElementById('theresult5').style.display = 'none';
        document.getElementById('theresult6').style.display = 'none';
      } else if(value =='24') {
        document.getElementById('theresult4').innerHTML=Math.round(track.pay / track.answer)
        document.getElementById('theresult4').style.display = 'block';
        document.getElementById('theresult1').style.display = 'none';
        document.getElementById('theresult2').style.display = 'none';
        document.getElementById('theresult3').style.display = 'none';
        document.getElementById('theresult5').style.display = 'none';
        document.getElementById('theresult6').style.display = 'none';

      } else if(value == '36') {
        document.getElementById('theresult5').innerHTML=Math.round(track.pay / track.answer)
        document.getElementById('theresult5').style.display = 'block';
        document.getElementById('theresult1').style.display = 'none';
        document.getElementById('theresult2').style.display = 'none';
        document.getElementById('theresult3').style.display = 'none';
        document.getElementById('theresult4').style.display = 'none';
        document.getElementById('theresult6').style.display = 'none';
      } else if(value == '50') {
        document.getElementById('theresult6').innerHTML=Math.round(track.pay / track.answer)
        document.getElementById('theresult6').style.display = 'block';
        document.getElementById('theresult1').style.display = 'none';
        document.getElementById('theresult2').style.display = 'none';
        document.getElementById('theresult3').style.display = 'none';
        document.getElementById('theresult4').style.display = 'none';
        document.getElementById('theresult5').style.display = 'none';
      }
    })
  );