Html按钮文字变化

问题描述：

我喜欢这个按钮。当你点击它时，按钮文字应该变成“正在更新...”。然后两秒钟后它应该更改为“已更新！”并且该按钮在此之后不应该是可点击的。Html按钮文字变化

当前HTML按钮脚本：

<a class="btn-primary-md" id="buyButton" onclick="text = 'Updated!'">Update</a>

您的意思是？ https://fiddle.jshell.net/3ht2jzhm/或2秒超时：https：//fiddle.jshell.net/3ht2jzhm/1/ – Tom

是的。只需要两秒钟后它又会改变。就像“你点击了我2秒钟！” –

那么这个？ https://fiddle.jshell.net/3ht2jzhm/2/ – Tom

答

所以总结一下，你有一个按钮/链接，你的onclick想要：

要更改的元素的文本。
要禁用的元素。
两秒后将该值再次更改为另一个的值。

您可以通过从HTML中提取的JavaScript的可读性和可维护性这样做：

var button = document.getElementById("btn"); 
 

 
button.addEventListener("click", function() { 
 
\t button.disabled = true; 
 
    button.innerHTML = "Waiting..."; 
 
    
 
\t setTimeout(function() { 
 
    \t button.innerHTML = "Thank you!"; 
 
\t \t button.disabled = false; 
 
    }, 2000); 
 
});

<button id="btn" type="button"> 
 
    Click me 
 
</button>

Thx。仍然只能工作一次。（能够点击一次） –

@TobiasWangJørgensen查看更新后的代码，在点击和更改值时禁用该按钮。 – Tom

刚刚更改为false且false为true。现在它工作了！ –

答

<input onclick="change()" type="button" value="Updated" id="buyButton" />

的Javascript：

function changeBtnTxt() 
{ 
document.getElementById("buyButton").value="Update"; 
    }

也许......

答

<input onclick="changeBtnTxt()" type="button" value="Update" id="buyButton" /> 

function changeBtnTxt() 
    { 
    document.getElementById("buyButton").value="Updated"; 
    }

这是正确的！抱歉!

Html按钮文字变化

相关推荐