HTML input elements and Javascript onclick function

Question

I want to make all my HTML input elements change according to an onclick Javascript function and prevent them from changing again after a click event. My problem is that all the input elements change if only one of them is clicked on. Here is my HTML code:

<input type="button" id="button1" onclick="playerMove('button1')"/><input type="button" id="button2" onclick="playerMove('button2')"/><input type="button" id="button3" onclick="playerMove('button3')"/>
<input type="button" id="button4" onclick="playerMove('button4')"/><input type="button" id="button5" onclick="playerMove('button5')"/><input type="button" id="button6" onclick="playerMove('button6')"/>
<input type="button" id="button7" onclick="playerMove('button7')"/><input type="button" id="button8" onclick="playerMove('button8')"/><input type="button" id="button9" onclick="playerMove('button9')"/>

Here is my Javascript function:

function playerMove() {

    document.getElementById("button1").value = "X";
    document.getElementById("button1").disabled = "disabled";
    document.getElementById("button2").value = "X";
    document.getElementById("button2").disabled = "disabled";
    document.getElementById("button3").value = "X";
    document.getElementById("button3").disabled = "disabled";
    document.getElementById("button4").value = "X";
    document.getElementById("button4").disabled = "disabled";
    document.getElementById("button5").value = "X";
    document.getElementById("button5").disabled = "disabled";
    document.getElementById("button6").value = "X";
    document.getElementById("button6").disabled = "disabled";
    document.getElementById("button7").value = "X";
    document.getElementById("button7").disabled = "disabled";
    document.getElementById("button8").value = "X";
    document.getElementById("button8").disabled = "disabled";
    document.getElementById("button9").value = "X";
    document.getElementById("button9").disabled = "disabled";

  }

... and that's when you learn to use loops. And maybe jQuery. — Jonathan Lam
– Jonathan Lam, Commented Nov 29, 2015 at 16:11

Nagesh Sanika · Accepted Answer · 2015-11-29 16:14:19Z

4

change your js function like this

   function playerMove(button) {
        document.getElementById(button).value = "X";
        document.getElementById(button).disabled = "disabled"; 
    }

answered Nov 29, 2015 at 16:14

Nagesh Sanika

1,1001 gold badge8 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rusca8 Over a year ago

This should be the accepted answer. He just missed the function variable.

Jonathan Lam · Accepted Answer · 2015-11-29 16:18:34Z

2

You can do this simply with jQuery:

$("input[type=button]").click(function() {
    $(this).attr("disabled", "disabled");
    $(this).val("X");
});

This will dynamically add an onclick event listener to each <input type="button" /> to automatically turn on the disabled attribute. No function nor onclick attributes required.

If you don't want to use / don't know how to use jQuery, then here's a plain JS representation of the above code:

var buttons = document.querySelectorAll("input[type=button]");
for(var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener("click", function() {
        this.disabled = "disabled";
        this.value = "X";
    });
}

edited Nov 29, 2015 at 16:18

answered Nov 29, 2015 at 16:12

Jonathan Lam

17.5k17 gold badges72 silver badges99 bronze badges

4 Comments

Paul S. Over a year ago

I think you want .querySelectorAll

Jonathan Lam Over a year ago

@PaulS. Ooops I'll fix that. Thanks.

Paul S. Over a year ago

I also don't think this is what OP wants, reads like setting everything is not intended behaviour

Jonathan Lam Over a year ago

@PaulS. Oops sorry again. Fixed it.

guest271314 · Accepted Answer · 2015-11-29 16:40:28Z

2

Try using single onclick handler attached to window ; if event.target of click is INPUT element and event.target is not disabled , set event.target value to "x" , disabled property to true

window.onclick = function(e) {
  if (e.target.nodeName === "INPUT" 
      && /^button\d+$/.test(e.target.id)
      && !e.target.disabled) {
    e.target.disabled = true;
    e.target.value = "x"
  }
}

<input type="button" id="button1" />
<input type="button" id="button2" />
<input type="button" id="button3" />
<input type="button" id="button4" />
<input type="button" id="button5" />
<input type="button" id="button6" />
<input type="button" id="button7" />
<input type="button" id="button8" />
<input type="button" id="button9" />

edited Nov 29, 2015 at 16:40

answered Nov 29, 2015 at 16:25

guest271314

1

2 Comments

Paul S. Over a year ago

As you're being as broad-reaching (listening on window) you may want to be more specific than a test for <input>. Maybe also test type="button" etc

guest271314 Over a year ago

@PaulS. Added check for id beginning with "button" , ending with digit

Paul S. · Accepted Answer · 2015-11-29 16:24:57Z

Consider attaching your event handlers entirely in JavaScript

window.addEventListener('load', function () { // after page loaded (i.e. elements exist)
    Array.prototype.forEach.call(             // for each
        document.querySelectorAll('.my_awesome_buttons'), // of the awesome buttons
        function (button) {                   // call it "button" and do the following
            button.addEventListener(          // when it gets
                'click',                      // clicked
                function (e) {                // do your thing to it
                    this.value = "X";
                    this.disabled = "disabled";
                }
            );
        }
    );
});

<input type="button" id="button1" class="my_awesome_buttons"/><input type="button" id="button2" class="my_awesome_buttons"/><input type="button" id="button3" class="my_awesome_buttons"/>
<input type="button" id="button4" class="my_awesome_buttons"/><input type="button" id="button5" class="my_awesome_buttons"/><input type="button" id="button6" class="my_awesome_buttons"/>
<input type="button" id="button7" class="my_awesome_buttons"/><input type="button" id="button8" class="my_awesome_buttons"/><input type="button" id="button9" class="my_awesome_buttons"/>

element.addEventListener
document.querySelectorAll
Array.prototype.forEach
- Which gets Function.prototype.called on a NodeList in this example

Collectives™ on Stack Overflow

HTML input elements and Javascript onclick function

4 Answers 4

1 Comment

4 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related