onclick submit无法使用setTimeout和document.getElementById调用JavaScript函数

Question

我不想在单击提交时调用timedText()函数，然后调用setTimeout()并用 1 秒、2 秒和 3 秒替换标签<p>。

<script>
    function timedText()
    { 
        var x=document.getElementById('txt1');
        var t1 = setTimeout(function(){x.innerHTML="1 seconds"},1000);
        var t2 = setTimeout(function(){x.innerHTML="2 seconds"},2000);
        var t3 = setTimeout(function(){x.innerHTML="3 seconds"},3000);
    }
</script>
<p>
    <a href="#">
        Izmeni<p id="txt1"></p>  
    </a>
</p>
<input type="submit" name="answer" value="Postavi" onclick="timedText()"/>

Answer 1

这是因为提交按钮正在提交页面。

就个人而言，我喜欢使用<button onclick="dosomething()">Click me!</button>.但是有些浏览器也将其视为提交按钮...因此，return false;请确保在事件处理程序（即。 onclick="dosomething(); return false;" ）

Answer 2

一些事情发生了变化：

• 将提交按钮更改为标准按钮。 提交按钮可能重新加载页面，并且永远不会触发操作。 无论哪种方式，都不适合在单击时调用函数。
• 更改了单击由 javascript 分配的 html 按钮。 这是做到这一点的现代方法，而且更可靠。
• 稍微清理了一下 html。 p 标签位于锚点内，这并不理想。 不过，这主要是可选的。

JSFiddle

http://jsfiddle.net/q9Juv/

.HTML

<p>
    <a href="#">Izmeni</a>
    <p id="txt1"></p>  
</p>
<input type="button" id="button" name="answer" value="Postavi" />

.JS

 function timedText(){ 
     var x=document.getElementById('txt1');
     var t1=setTimeout(function(){x.innerHTML="1 seconds"},1000);
     var t2=setTimeout(function(){x.innerHTML="2 seconds"},2000);
     var t3=setTimeout(function(){x.innerHTML="3 seconds"},3000);
}
document.getElementById('button').addEventListener('click',timedText);

Answer 3

也许这会帮助你以更清晰的方式看待事物（希望如此）：

<p><a href="#">Izmeni<p id="txt1"></p></a></p>
<input type="submit" name="answer" value="Postavi" onclick="StartTimer(3)"/>
<script type="text/javascript">
    var timerId = null;
    var element = document.getElementById("txt1");
    function StartTimer(numOfSeconds)
    {
        element.innerHTML = String(numOfSeconds)+" seconds";
        timerId = setInterval(TimerIsr,1000);
    }
    function StopTimer()
    {
        clearInterval(timerId);
        element.innerHTML = "";
    }
    function TimerIsr()
    {
        var numOfSeconds = Number(element.innerHTML.split(" ")[0]);
        if (numOfSeconds > 2)
            element.innerHTML = String(numOfSeconds-1)+" seconds";
        else if (numOfSeconds == 2)
            element.innerHTML = "1 second";
        else
            StopTimer();
    }
</script>