javascript - 设置和删除只读 JavaScript - 无法同时执行这两项操作

Question

这是我第一次尝试 JavaScript(学习 Java atm)，我快完成了。我想要做的是:在页面刷新时从我的文本区域中删除只读，并在几分钟后使用计时器将其设置为只读。

所有计时器、getElement-parts 和 readOnly-attributes 似乎都在工作(终于)。

JavaScript:

<script>
//x = Timelimit in minutes, z = Time remaining alert in minutes
function timeLimit(x,z) {
    var min = 60 * 1000;
    var limit = x * min;
    setTimeout(function(){ alert("Du har " + z + " minutter igjen på prøven.") },( limit - (z * min) ));
    setTimeout(function(){ alert(x + " minutter har gått.\nTiden er slutt.") },limit);
    setTimeout(document.getElementById('testroom').setAttribute('readOnly','readOnly'),limit);
}
</script>

这是对我的函数的调用(将其放在我的文本区域下方，因为它似乎是 getElement 通过 id 查找我的文本区域的唯一方法):

    <form method="post" action="insert.php" />
        <textarea name="content" id="testroom"></textarea><br>
        <input type="submit" value="Send inn for retting" />
    </form>

<script>
timeLimit(0.2,0.1);
document.getElementById('testroom').removeAttribute("readOnly",0);
</script>

如果我将removeAttribute移至timeLimit()上方(或将其放入函数内)，我的文本区域将保持readonly=true。如果我把它放在下面，即使在 12 秒(0.2 分钟，计时器应该发生的时间)之后，它也会保持 readonly=false。

希望有人能为我解决这个问题，我一直在搜索并尝试很多不同的语法。

Answer 1

您的第三次 setTimeout() 调用没有执行您想要的操作。相反，它立即执行 .setAttribute() 方法。您应该将其包装在一个函数中以便稍后执行。

setTimeout(function(){ alert(x + " minutter har gått.\nTiden er slutt.") },limit);
setTimeout(function(){document.getElementById('testroom').setAttribute('readOnly','readOnly')},limit);

更好的是，您可以将两者结合起来，但请确保首先调用 setAttribute，这样用户就无法在不合适的时候偷偷地杀死您的 JavaScript:

setTimeout(function(){
    document.getElementById('testroom').setAttribute('readOnly','readOnly');
    alert(x + " minutter har gått.\nTiden er slutt.");
},limit);