无法使用innerHTML和innerText更改标签内容

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

我正在创建一个HTML / JS计算器，我的主要结果在div中，但是我无法使用eventListeners进行更改。我试图得到结果的innerHTML和innerText。并尝试以几种方式进行更改，但不幸的是，它没有更改结果内容。

这是我尝试过的：

HTML：

<body>
    <div id="calculator">
        <div id="result">0</div>

        <div class="buttons" id="clearOne">C</div>
        <div class="buttons" id="clearAll">&#8592;</div>
        <div class="buttons" id="random">RAND</div>
        <div class="buttons" id="equal">=</div>

        <div class="buttons" id="one">1</div>
        <div class="buttons" id="two">2</div>
        <div class="buttons" id="three">3</div>
        <div class="buttons" id="multiply">X</div>

        <div class="buttons" id="four">4</div>
        <div class="buttons" id="five">5</div>
        <div class="buttons" id="six">6</div>
        <div class="buttons" id="division">/</div>

        <div class="buttons" id="seven">7</div>
        <div class="buttons" id="eight">8</div>
        <div class="buttons" id="nine">9</div>
        <div class="buttons" id="minus">-</div>

        <div class="buttons" id="doubleZero">00</div>
        <div class="buttons" id="zero">0</div>
        <div class="buttons" id="dot">.</div>
        <div class="buttons" id="plus">+</div>
    </div>

    <script src="./calculator.js"></script>
</body>

JS：

let result = document.getElementById('result').innerHTML;

let one = document.getElementById('one');
let two = document.getElementById('two');
let three = document.getElementById('three');
let four = document.getElementById('four');
let five = document.getElementById('five');
let six = document.getElementById('six');
let seven = document.getElementById('seven');
let eight = document.getElementById('eight');
let nine = document.getElementById('nine');
let zero = document.getElementById('zero');
let doubleZero = document.getElementById('doubleZero');
let dot = document.getElementById('dot');

let clearOne = document.getElementById('clearOne');
let clearAll = document.getElementById('clearAll');
let random_btn = document.getElementById('random');
let equal = document.getElementById('equal');
let multiply = document.getElementById('multiply');
let divison = document.getElementById('division');
let minus = document.getElementById('minus');
let plus = document.getElementById('plus');

const numberEvents = (btn, value) => {
    return btn.addEventListener(
        "click",
        () => {
            if (result === '0'){
                result = "";
                console.log('test');
                result + `${value}`;
            } else {
                console.log('test1');
                result + `${value}`;
            }
        }
    )
}

numberEvents(one, '1');
numberEvents(two, '2');
numberEvents(three, '3');
numberEvents(four, '4');
numberEvents(five, '5');
numberEvents(six, '6');
numberEvents(seven, '7');
numberEvents(eight, '8');
numberEvents(nine, '9');

问题不在numberEvents功能中。我也尝试单独写addEventListener。

这里是代码和框中的完整程序：https://codesandbox.io/s/html-css-wxmh8?fontsize=14&hidenavigation=1&theme=dark

javascript html dom events
1个回答
1
投票

因为document.getElementById('result').innerHTML —只是一个字符串。当您稍后编写result + value时，它只是一个操作，没有任何分配。 result = result + value不会更改任何内容-它会更改保存的字符串，但不会更改实际的“ innerHTML”。

您必须将HTML对象保存到变量，并每次都检查其更新的textContent：

let result = document.getElementById('result');

let one = document.getElementById('one');
let two = document.getElementById('two');
let three = document.getElementById('three');
let four = document.getElementById('four');
let five = document.getElementById('five');
let six = document.getElementById('six');
let seven = document.getElementById('seven');
let eight = document.getElementById('eight');
let nine = document.getElementById('nine');
let zero = document.getElementById('zero');
let doubleZero = document.getElementById('doubleZero');
let dot = document.getElementById('dot');

let clearOne = document.getElementById('clearOne');
let clearAll = document.getElementById('clearAll');
let random_btn = document.getElementById('random');
let equal = document.getElementById('equal');
let multiply = document.getElementById('multiply');
let divison = document.getElementById('division');
let minus = document.getElementById('minus');
let plus = document.getElementById('plus');

const numberEvents = (btn, value) => {
  btn.addEventListener("click", function() {
    if (result.textContent === '0') {
      result.textContent = "";
      console.log('test');
      result.textContent += value; 
      // The same as    result.textContent = result.textContent + value
    } else {
      console.log('test1');
      result.textContent += value;
    }
  });
}

numberEvents(one, '1');
numberEvents(two, '2');
numberEvents(three, '3');
numberEvents(four, '4');
numberEvents(five, '5');
numberEvents(six, '6');
numberEvents(seven, '7');
numberEvents(eight, '8');
numberEvents(nine, '9');
.buttons {
  display: inline-block;
  width: 100px;
}
<div id="calculator">
  <div id="result">0</div>

  <div class="buttons" id="clearOne">C</div>
  <div class="buttons" id="clearAll">&#8592;</div>
  <div class="buttons" id="random">RAND</div>
  <div class="buttons" id="equal">=</div>

  <div class="buttons" id="one">1</div>
  <div class="buttons" id="two">2</div>
  <div class="buttons" id="three">3</div>
  <div class="buttons" id="multiply">X</div>

  <div class="buttons" id="four">4</div>
  <div class="buttons" id="five">5</div>
  <div class="buttons" id="six">6</div>
  <div class="buttons" id="division">/</div>

  <div class="buttons" id="seven">7</div>
  <div class="buttons" id="eight">8</div>
  <div class="buttons" id="nine">9</div>
  <div class="buttons" id="minus">-</div>

  <div class="buttons" id="doubleZero">00</div>
  <div class="buttons" id="zero">0</div>
  <div class="buttons" id="dot">.</div>
  <div class="buttons" id="plus">+</div>
</div>

但是，如果您有多个具有相同功能的按钮，那么使用id是不好的做法。替代解决方案的小演示：

let res = document.getElementById('result');
let num = document.querySelectorAll('.type-number');

for( let i = 0; i < num.length; i++ ){
  num[i].addEventListener('click', function(){
    if( res.textContent == 0 ) {
      res.textContent = this.textContent;
    } else {
      res.textContent += this.textContent;
    }
  });
}
.type-number {
  margin: 5px;
  font-size: 25px;
}
<p id="result">0</p>

<button class="type-number">1</button>
<button class="type-number">2</button>
<button class="type-number">3</button><br>
<button class="type-number">4</button>
<button class="type-number">5</button>
<button class="type-number">6</button><br>
<button class="type-number">7</button>
<button class="type-number">8</button>
<button class="type-number">9</button><br>
<button class="type-number">0</button>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.