CODEWITHSUNDEEP
javascript
user1679941
user1679941

Reputation:

How can I disable a button after click

I am using the following script to set my colors:

<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>

Here's my 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>

How can I make it so that when a color is chosen that the button to select that color is disabled so that It cannot be selected again? Then when another button is clicked the other(s) are enabled. Also I need to set the button that's chosen from localstorage to disabled. Sorry I didn't not mention this fully in the question earlier.

Upvotes: 0

Views: 206

Answers (4)

Marko
Marko

Reputation: 10992

Preferred is to use this and bind it to a variable (often that). In this you get the html-object who called the function.

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"; 
    }

Upvotes: 0

Rayon
Rayon

Reputation: 36609

You can also use :

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

Upvotes: 0

qternion
qternion

Reputation: 526

In addition to other answers (just send the button in the handler), you can use this when initially setting the color from localStorage (assuming your 'form' is the first child of '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
}

Although you might want to consider using jQuery if you often need to find elements in your code, since the getElementsByTagName selections can get verbose.

Upvotes: 0

gdoron
gdoron

Reputation: 150253

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

and simply send this:

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

<disclaimer> inline javascript is evil</disclaimer>

Upvotes: 2

Related Questions