Can't change the button's value with jQuery

Question

I'm trying to change the value of my button with jQuery.

This is what i have in html:

<button id="choice1">John</button>

And this is what I've tried to change the value:

$(document).ready(function(){
    $("#choice1").click(function(){
        $(this).val("Mike");  
    });
});

I even tried .attr / .prop / .html / .text instead of .val but none of them worked.

Ok so if I'm trying to change it to an Array like this:

var a = new Array(4000)

a[2][1] = "North"
a[2][2] = "South"
a[2][3] = "East"
a[2][4] = "West"

And the function:

function state1gmg(){
$(document).ready(function(){
    $("div#gamestatesdiv").text(state1);
});

$(document).ready(function(){
    $("div#questionsdiv").text(q[1]);
});

$(document).ready(function(){
    $("#choice1").click(function(){
        $(this).html(a[2][1]);  
    });
});

}

Any help? Thanks in Advance!!

Make sure jQuery is loaded successfully (check the console). — DjaouadNM, Aug 08 '17 at 17:19
Check this out. Well explained. [jQuery change button text](https://stackoverflow.com/questions/5580616/jquery-change-button-text) — Maximilian Fixl, Aug 08 '17 at 17:30

score 2 · Answer 1 · answered Aug 08 '17 at 17:18

Changing a <button> value requires changing .text or .html.

In this snippet, .text works as expected:

$(document).ready(function(){
    $("#choice1").click(function(){
        $(this).text("Mike");  
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<button id="choice1">John</button>

P.S. · Accepted Answer · 2017-08-08T17:25:21.550

2

You should use text() or html() instead of val():

$(document).ready(function(){
    $("#choice1").click(function(){
        $(this).text("Mike");  
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="choice1">John</button>

edited Aug 08 '17 at 17:25

answered Aug 08 '17 at 17:19

P.S.

15,970
14
62
86

score 2 · Answer 3 · answered Aug 08 '17 at 17:20

$(document).ready(function(){
    $("#choice1").click(function(){
        $(this).val("Mike");  
        console.log ($(this).val()); // Mike. This changes value, but I suppose that you want to change inner text
        $(this).text("Mike");  // now the visible text will be Mike
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<button id="choice1">John</button>

score 1 · Answer 4 · answered Aug 08 '17 at 17:18

1

You're changing the value alright, but what you want to do with a button (unlike an input) is to change the HTML (or text):

$(document).ready(function(){
    $("#choice1").click(function(){
        $(this).html("Mike");  
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="choice1">John</button>

answered Aug 08 '17 at 17:18

j08691

204,283
31
260
272

why html instead of text? – qiAlex Aug 08 '17 at 17:21
@qiAlex - No reason at all. As I said in my answer, either works fine. I just had to pick one and both work since a ` – j08691 Aug 08 '17 at 17:23
Hmm, Yeah that works fine, but only if I'm changing it to text like "Mike". What if I want to change it to a variable for example? – Duarte Arribas Aug 08 '17 at 17:25
@DuarteArribas Then you'd pass `.html()` (or `.text()`) a variable instead of a string. Ex: `$(this).html(myVar)` – j08691 Aug 08 '17 at 17:26
@j08691 Let's say I have an Array. If I did this `$(this).html(a[2][1])` was it suppose to work? Cause it doesn't actually. – Duarte Arribas Aug 08 '17 at 17:30
Yes, it should, but you would need to provide a complete code example for us to see where the error is. Have you checked the browser's console for errors? – j08691 Aug 08 '17 at 17:32
@j08691 Well It has a couple of errors that i might need help figuring them out. So first the arrays are `var a = new Array(4000) a[2][1] = "North" a[2][2] = "South" a[2][3] = "East" a[2][4] = "West"` And the function: `function state1gmg(){ $(document).ready(function(){ $("div#gamestatesdiv").text(state1); }); $(document).ready(function(){ $("div#questionsdiv").text(q[1]); }); $(document).ready(function(){ $("#choice1").click(function(){ $(this).html(a[2][1]); }); }); }` – Duarte Arribas Aug 08 '17 at 17:35
Sorry, I can't troubleshoot code in the comments. Too difficult to read and prone to errors. You should either update this question with code that really shows your problem or start a different question. – j08691 Aug 08 '17 at 17:37
@j08691 Done I just edited the post, hope you can help me. – Duarte Arribas Aug 08 '17 at 17:39
1

@j08691 Omg, I figured it out. It's all my fault. I had to put `for(i = 1; i <= 4; i++){ a[i] = new Array(4) }` to put a second Array, but I didn't do it. Thanks for all of your help!!!!! – Duarte Arribas Aug 08 '17 at 17:46

Can't change the button's value with jQuery

4 Answers4