Javascript 无法使用innerHTML和innerText更改标记内容_Javascript_Html_Dom_Events

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

javascript html dom events

Javascript 无法使用innerHTML和innerText更改标记内容,javascript,html,dom,events,Javascript,Html,Dom,Events,我正在创建一个HTML/JS计算器，我的主要结果是在div中，但是我不能用eventListeners更改它。我尝试获取结果的innerHTML和innerText。并试图以多种方式更改它，但不幸的是，它没有更改结果内容以下是我尝试过的： HTML: 问题不在NumberRevents函数中。我也试着分别编写addEventListener 下面是codesandbox中的完整程序：因为document.getElementById'result'.innerHTML-只是一个字符串。当您稍后

我正在创建一个HTML/JS计算器，我的主要结果是在div中，但是我不能用eventListeners更改它。我尝试获取结果的innerHTML和innerText。并试图以多种方式更改它，但不幸的是，它没有更改结果内容

以下是我尝试过的：

HTML:

问题不在NumberRevents函数中。我也试着分别编写addEventListener

下面是codesandbox中的完整程序：

因为document.getElementById'result'.innerHTML-只是一个字符串。当您稍后写入结果+值时-它只是一个操作，没有任何赋值。result=result+value也不会更改任何内容-它会更改保存的字符串，但不会更改实际的innerHTML

您必须将HTML对象保存到变量中，并检查其每次更新的文本内容：

让result=document.getElementById'result'；设one=document.getElementById'one'；设two=document.getElementById'two'；设three=document.getElementById'three'；设four=document.getElementById'four'；设five=document.getElementById'five'；设six=document.getElementById'six'；设seven=document.getElementById'seven'；设八=document.getElementById'eight'；设nine=document.getElementById'nine'；设zero=document.getElementById'zero'；设doubleZero=document.getElementById'doubleZero'；让dot=document.getElementById'dot'；让clearOne=document.getElementById'clearOne'；让clearAll=document.getElementById'clearAll'；让random_btn=document.getElementById'random'；让equal=document.getElementById'equal'；让multiply=document.getElementById'multiply'；让division=document.getElementById'division'；让减号=document.getElementById'减号'；让plus=document.getElementById'plus'； const numberEvents=btn，值=>{ btn.addEventListenerclick，函数{ 如果result.textContent==“0”{ result.textContent=； console.log'test'； result.textContent+=值； //与result.textContent=result.textContent+值相同 }否则{ console.log'test1'； result.textContent+=值； } }; } 编号为“1”；数字2；数字为三，‘3’；四个“4”的数字；数字5，‘5’；编号为“6”；编号为“7”；数字“8”；数字“9”； .按钮{ 显示：内联块；宽度：50px；边框：1px实心橙色；保证金：5px；填充物：5px；光标：指针； } 0 C &8592; 兰德 = 1. 2. 3. X 4. 5. 6. / 7. 8. 9 - 00 0 . +

要更改innerHTML或获取当前值，需要显式设置/获取innerHTML。variable=…innerHTML仅将变量设置为当前值。变量和innerHTML之间没有绑定。更改一个不会更改另一个。您也不会保存结果+`${value}`；到anything@PatrickEvans对不起，你能在我在最新编辑中提到的代码沙盒中显示它吗？我不明白我到底做错了什么：/@PatrickEvans哦，我现在明白了，非常感谢你的解释！这个带有循环的方法看起来很棒，但它不起作用，是不是出了什么问题？“运行代码片段”？这里-它起作用了。。。可能复制粘贴阶段出错。请选择或all.type-number；-它是一个类选择器。。。您的数字按钮必须具有唯一的类，才能使用querySelectorAll收集它们。。。循环已经添加了所有必需的事件侦听器。。。您不需要将循环放入NumberRevents函数中。。。如果必须分开工作。对不起，我错了，我犯了一个错误。我写了类型按钮，而不是类型编号XD…而不仅仅是我的代码，你修复并改进了它。非常感谢你！

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

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