Question

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

<!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等待一秒钟功能

Answer 1

您的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。

Answer 2

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

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

而不是：

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

Answer 3

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

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/

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

3 个答案: