JS - 通过在模式中单击按钮来增加 JavaScript 中的变量

问题描述 投票：0回答：1

这是我已回答和解决的上一个问题的延续。

我使用 this 创建了我自己的 JS 增量和减量。

错误

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')

我尝试实现这个

let counter = 1;

let temp = document.getElementById('right');

temp.addEventListener("click", function() {
   console.log(counter);
   counter++;
   if(counter > 1){
    // just to show that counter is available outside the annonymous 
    // function
     let tval = getCounterValue();
     console.log("Value " + tval);
       }
    
});
function getCounterValue(){
     return counter;
        }   

<button id="right" type="button" class="btn" data-dismiss="modal">Yes</button>

我遇到了同样的错误。

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')

我分别放置了 

deter
和 
async
，因为每次尝试时，
<script>
都被放置在 或 
<body>
（开始）或 
<body>
（结束）中。

它确实在问题选项卡中提到了

Unload event listeners are deprecated and will be removed.
（如果相关的话）。

我似乎不明白如何利用添加事件侦听器来单击模态弹出窗口中具有指定 ID 的按钮。

这是我的 HTML 的一个最小示例，它与我尝试读取似乎为空的“值”有同样的问题。

<html lang="en">
    <head>
        <title>Test Increments</title>
        <!-- MY Script JS -->
        <script defer> /* TEMPORARY */
        /* Profile Statistic Counters */

        // VARIABLES
        /* whatever is 'right' answer | assign ID value */
        const rightInc = document.getElementById("right");
        const wrongInc = document.getElementById("wrong");

        /* display amount of 'right' & 'wrong' answers */
        let rightAns = document.getElementById("outputright").value;
        let wrongAns = document.getElementById("outputwrong").value;
        //convert value to number
        rightAns = parseFloat(rightAns);
        wrongAns = parseFloat(wrongAns);
        if (!isNaN(rightAns) || !isNaN(wrongAns)) { // if value is not "Not a number"
            console.log("The number is: " + maxValue);
        }
        
        let rightCount = 1;
        let wrongCount = 1;
        
        function getRight() { 
            console.log( 'Current: ' + rightCount );
            return rightCount; }
        function getWrong() { 
            console.log( 'Current: ' + wrongCount );
            return wrongCount; }

        function right() { 
            rightCount++; 
            console.log( 'Increased by 1: ' + rightCount );}
        function wrong() { 
            wrongCount++;
            console.log( 'Increased by 1: + ' + wrongCount ); }
        
        /* when correct increment based on 'right' & 'wrong' */
        rightInc.addEventListener("click", function(){
            console.log( 'Before Click: ' + rightCount );
            right();
            rightAns.value = getRight();
            });
        wrongInc.addEventListener("click", function(){
            console.log( 'Before Click: ' + wrongCount );
            wrong();
            wrongAns.value = getWrong();
            });
    
        </script>
    </head>
    <body>

    <h4 class="modal-title">Stats</h4>
                    
    <!-- table display -->
    <div class="modal-body"> 
        <!-- Record of Questions-->
        <label for="outputright">Right Answers:</label>
        <td><input type="number" id="outputright" value=1 readonly> </td>
        <label for="outputwrong">Wrong Answers:</label>
        <td><input type="number" id="outputwrong" value=1 readonly> </td>
    </div>

    <h4 class="modal-title">Test Question Modal</h4>
                
    <!-- Question answers -->
    <div class="input-group">
        <p>Do you agree?</p>
        <button id="right" type="button" class="btn" data-dismiss="modal">Yes</button>
        <button id="wrong" type="button" class="btn" data-dismiss="modal">No</button>
        <button type="button" class="btn">Maybe</button>
    </div>
</body>

</html>
javascript html button modal-dialog addeventlistener
1个回答
0
投票

我们一直在尝试制作片段，而你却将它们删除。

这是一个工作脚本。

我将代码包装在 DOMContentLoaded 中，并且必须添加 maxValue

window.addEventListener('DOMContentLoaded', () => { // when page elements are available
  /* Profile Statistic Counters */
  const maxValue = 0;// ?
  // VARIABLES
  /* whatever is 'right' answer | assign ID value */
  const rightInc = document.getElementById("right");
  const wrongInc = document.getElementById("wrong");

  //convert value to number
  let rightAns = +document.getElementById("outputright").value;
  let wrongAns = +document.getElementById("outputwrong").value;

  if (!isNaN(rightAns) || !isNaN(wrongAns)) { // if value is not "Not a number"
    console.log("The number is: " + maxValue);
  }

  let rightCount = 1;
  let wrongCount = 1;

  function getRight() {
    console.log('Current: ' + rightCount);
    return rightCount;
  }

  function getWrong() {
    console.log('Current: ' + wrongCount);
    return wrongCount;
  }

  function right() {
    rightCount++;
    console.log('Increased by 1: ' + rightCount);
  }

  function wrong() {
    wrongCount++;
    console.log('Increased by 1: + ' + wrongCount);
  }

  /* when correct increment based on 'right' & 'wrong' */
  rightInc.addEventListener("click", function() {
    console.log('Before Click: ' + rightCount);
    right();
    rightAns.value = getRight();
  });
  wrongInc.addEventListener("click", function() {
    console.log('Before Click: ' + wrongCount);
    wrong();
    wrongAns.value = getWrong();
  });
});
<h4 class="modal-title">Stats</h4>

<!-- table display -->
<div class="modal-body">
  <!-- Record of Questions-->
  <label for="outputright">Right Answers:</label>
  <td><input type="number" id="outputright" value=1 readonly> </td>
  <label for="outputwrong">Wrong Answers:</label>
  <td><input type="number" id="outputwrong" value=1 readonly> </td>
</div>

<h4 class="modal-title">Test Question Modal</h4>

<!-- Question answers -->
<div class="input-group">
  <p>Do you agree?</p>
  <button id="right" type="button" class="btn" data-dismiss="modal">Yes</button>
  <button id="wrong" type="button" class="btn" data-dismiss="modal">No</button>
  <button type="button" class="btn">Maybe</button>
</div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.