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

Question

I'm creating an HTML/JS calculator, and my main result is in the div, but I can't change it with eventListeners.我正在创建一个 HTML/JS 计算器，我的主要结果在 div 中，但我无法使用 eventListeners 更改它。 I tried to get innerHTML and innerText of the result.我试图获得结果的innerHTML和innerText 。 And tried to change it in several ways but unfortunately, it didn't change the result content.并尝试以多种方式对其进行更改，但不幸的是，它并没有更改结果内容。

Here is what I tried:这是我尝试过的：

HTML: 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: 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');

The problem is not in the numberEvents function.问题不在numberEvents函数中。 I tried to write addEventListener separately too.我也尝试单独编写addEventListener 。

Here is the full program in codesandbox: https://codesandbox.io/s/html-css-wxmh8?fontsize=14&hidenavigation=1&theme=dark这是codesandbox中的完整程序： https ://codesandbox.io/s/html-css-wxmh8 ? fontsize =14& hidenavigation =1& theme = dark

Answer 1

Because document.getElementById('result').innerHTML — is just a string.因为document.getElementById('result').innerHTML — 只是一个字符串。 When you write later result + value — it's just an operation, without any assignment.当您稍后编写result + value - 它只是一个操作，没有任何赋值。 result = result + value wouldn't change anything as well - it would change the saved string, but not the actual "innerHTML". result = result + value也不会改变任何东西——它会改变保存的字符串，但不会改变实际的“innerHTML”。

You must save an HTML-object to a variable, and check it's updated textContent each time instead:您必须将 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: 50px; border: 1px solid orange; margin: 5px; padding: 5px; cursor: pointer; }

 <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><br> <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><br> <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><br> <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><br> <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>

But it's bad practice to work with ids, if you have multiple buttons with the same functions.但是，如果您有多个具有相同功能的按钮，那么使用 id 是不好的做法。 A little demo of alternative solution:替代解决方案的一个小演示：

 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>

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-11-24 21:06:16

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-11-24 21:06:16

解决方案1
1 已采纳 2019-11-24 21:06:16