我需要对我的HTML/JavaScript代码进行一些故障排除

I need some troubleshooting with my HTML/JavaScript code

本文关键字：排除 故障 代码 JavaScript 我的 HTML      更新时间：2023-09-26

我正在尝试创建代码，当您按下按钮时，它将更改变量的值并替换一些文本。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <p id="unitts">You have 0 unitts</p>
    <script type="text/javascript">
        var unitt = 0;
        function unittIncrease() {
            var unittPrev = unitt;
            unitt++;
            document.getElementById(unitts).innerHTML.replace("You have " +  unittPrev.toString() + " unitts.", "You have " + unitt.toString() + " unitts.");
        }
    </script>
    <button id="unittIncrease" onclick="unittIncrease();">Digitize Unitt</button>
</body>
</html>

当我按下按钮时，文本没有任何变化。我不知道为什么这不起作用。请帮帮我！

编辑：我只有11岁，请不要扔你的巫师向我发送代码。

也许你应该删除你的按钮系统，并添加一个while循环自动添加一个单位，但使用setInterval等待一秒钟功能

我认为你应该像这个一样编写js代码

document.getElementById('unitts').innerHTML = "You have"....

代替：

document.getElementById(unitts).innerHTML.replace("...")

您的JavaScript应该是（注意用引号括起来的unitts和去掉的句号）：

 document.getElementById('unitts').innerHTML = "You have " + unitt + " unitts";

代替：

document.getElementById(unitts).innerHTML.replace("You have " +  unittPrev.toString() + " unitts.", "You have " + unitt.toString() + " unitts.");

在后者中，它查找不存在的变量unitts，而不是字符串'unitts'。此外，您正在查找无法找到的文本You have x unitts.，因为在HTML中，它只是没有句号的You have x unitts。

编辑

请参阅此plnkr。

除了其他答案提到的问题外，通过对元素的.innerHTML属性调用.replace方法，它的内容不会改变。您应该使用方法调用的返回值重置属性：

el.innerHTML = el.innerHTML.replace(...);

此外，当你试图增加一个数字，而不是替换所有字符时，你可以只替换数字部分：

var unitts = document.getElementById('unitts');
function unittIncrease() {
    unitts.textContent = unitts.textContent.replace(/'d+/, function(n) { 
        return +n + 1;
    });
}

https://jsfiddle.net/h6odbosg/

相关文章：