javascript - 单击后如何禁用按钮

Question

我正在使用以下脚本来设置我的颜色：

<script type="text/javascript">
    if (localStorage.buttonColor) {
        document.getElementsByTagName('html')[0].className = localStorage.buttonColor
    }
    function getButtonColor(buttonName) {
        localStorage.buttonColor = buttonName;
        document.getElementsByTagName('html')[0].className = buttonName
    }
</script>

这是我的 HTML：

<form class="ng-pristine ng-valid">
   <button name="darkBlue" onclick="getButtonColor(this.name)">Blue</button>
   <button name="black" onclick="getButtonColor(this.name)">Black</button>
</form>

我怎样才能使它在选择一种颜色时禁用选择该颜色的按钮，以便不能再次选择它？然后，当单击另一个按钮时，将启用其他按钮。我还需要将从本地存储中选择的按钮设置为禁用。抱歉，我没有在前面的问题中完全提到这一点。

Answer 1

function getButtonColor(button) {
    button.disabled = "disabled"
    localStorage.buttonColor = button.name;
    document.getElementsByTagName('html')[0].className = button.name
}

并简单地发送this：

<button name="darkBlue" onclick="getButtonColor(this)">Blue</button>
<button name="black" onclick="getButtonColor(this)">Black</button>

---

_{<disclaimer> inline javascript is evil</disclaimer>}

Answer 2

您还可以使用：

function getButtonColor(button) {        
var elem=documentt.getElementById(button.id);
elem.removeAttribute("onclick");
}

Answer 3

首选是使用它并将其绑定到一个变量（通常是那个）。在此您将获得调用该函数的 html 对象。

http://www.quirksmode.org/js/this.html https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

 function getButtonColor() {
        var that = this; 
        localStorage.buttonColor = that.Name;
        document.getElementsByTagName('html')[0].className = that.Name; 
        that.disabled = "disabled"; 
    }

Answer 4

除了其他答案（只需在处理程序中发送按钮），您可以在最初从 localStorage 设置颜色时使用它（假设您的“form”是“body”的第一个孩子）：

if (localStorage.buttonColor) {
    document.getElementsByTagName('html')[0].className = localStorage.buttonColor
    var buttons = document.body.getElementsByTagName('form')[0].getElementsByTagName('button')
    for(var i =0; i < buttons.length; i++)
        if(buttons[i].name == localStorage.buttonColor) button.disabled = true
}

尽管如果您经常需要在代码中查找元素，您可能需要考虑使用 jQuery，因为 getElementsByTagName 选择可能会变得冗长。