Changing values of DIV buttons using javascript

javascript change button label
javascript get button text
javascript add style to element
change button text/javascript
javascript change label text on button click
javascript change input value
get button value javascript
javascript get element by class

this is a noob question:

I'm defining a button in HTML like this:

<div>    
    <input class="btn-change" type="button" value="Select good points" />
</div>

To avoid showing too many buttons I'd like the button to toggle between

value="Select good points"

and

value="Select bad points

So in javascript i'm using

$(".btn-change").on("click", function() {

    alert("you pressed the " + nextMark + " button");

    switch(nextMark) {
        case "bad":
            nextMark = "good"
            document.getelementsbyclassname("btn-change").value="Select good points";
            break;
        case 'good':
            nextMark = "bad"
            $("btn-change").value = "Select bad points";
            break;
    }
}

The nextMark var changes the colour of marks placed on a leaflet map depending on the value of the button.

The alert shows the case structure is working but the button value isn't changing - what is the correct way of doing this?

jsfiddle right here

To assign a value to the input using JQuery you need to use .val() and not .value

var nextMark = "good";
$(".btn-change").on("click", function() {

  switch (nextMark) {
    case "bad":
      nextMark = "good";
      $(".btn-change").val("Select good points");
      break;
    case 'good':
      nextMark = "bad";
      $(".btn-change").val("Select bad points");
      break;
  }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input class="btn-change" type="button" value="Select good points" />
</div>

JavaScript/Changing elements, In JavaScript you can change elements by using the following syntax: In order to change an element, you use its argument name for the value you wish to change. For example, let's say we have a button, and we wish to change its value​. Let's work through the code, line by line. block_to_insert = document.createElement( 'div' ); This line creates the DIV element and assigns it to the block_to_insert variable. As you may have already guessed, although we used createElement() to make a DIV, you can also use it to make other HTML elements.

You need to specify index to document.getElementsByClassName("btn-change")[0].value = as 0

  var nextMark = "good";
    $(function(){
    $(".btn-change").on("click", function() {
        alert("you pressed the " + nextMark + " button");

        switch(nextMark) {
            case "bad":
                nextMark = "good"
               document.getElementsByClassName("btn-change")[0].value = "Select good points";
                break;
            case 'good':
                nextMark = "bad"
              document.getElementsByClassName("btn-change")[0].value = "Select bad points";
                break;
        }
    });
    })
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div>    
        <input class="btn-change" type="button" value="Select good points" />
    </div>

HTML button value Attribute, How do I change the value of a button in HTML? The JavaScript below the div specifies the container id and the number to count down from. When the page is loaded, it sets an interval for the countdown timer function. The interval is set at 1000 milliseconds.

First, you're missing an ending ); to close of the … .on("click" ….

If you are using jQuery, you need to remember to include that first (at the top in <head>), then you should define the JavaScript sheet later. Common practice is at the end, right before the </body> tag.

<script type="text/javascript" src="js.js"></script>
</body>

Next, for the alert, nextMark is not defined. You can do that with this. when using jQuery, you should keep to it, so use $(this). Put this inside the function to define nextMark: var nextMark = $(this);

Once that is done, you need to get the value of it, unless it will say you pressed the [object Object] button. You do that by adding .val() at the end of the target with jQuery; so nextMark.val() inside the alert.

Now to make it switch, you could use a simple if-else statement to switch between the two with:

if (nextMark.val() == "Select good points") {
    nextMark.val("Select bad points");
} else {
    nextMark.val("Select good points");
}

If you want to use switch, then at least to make it work you need to give it what case it is. What goes inside the (…) of the switch is the case it will use to check. If I put switch(x) and define x as var x = 1 or var x = "one, we will use this to decide which case to use: case 1: or case "one": will be executed.

var x = 1;
var y = "one";
switch(y) {
    case 1:
        // "y" is not 1.
        break;
    case "one":
        // "y" is "one", so this will be exectuted.
        break;
}

Therefore, we need to define when the button is "good" or "bad". You could do this by using the literal value, like:

var myMark = $(this).val();
switch(myMark) {
    case "Select bad points":
        $(this).val("Select good points");
        break;
    case 'Select good points':
        $(this).val("Select bad points");
        break;
}

$(".btn-change").on("click", function() {

	var nextMark = $(this);
    alert("you pressed the " + nextMark.val() + " button");

    /* Optional method: */
    // if (nextMark.val() == "Select good points") {
    // 	nextMark.val("Select bad points");
    // } else {
    // 	nextMark.val("Select good points");
    // }

	var myMark = $(this).val(); /* or var myMark = nextMark.val(); */
    switch(myMark) {
		case "Select bad points":
			$(this).val("Select good points");
			break;
		case 'Select good points':
			$(this).val("Select bad points");
			break;
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- jQuery included in this example to make it work -->

<div>    
    <input class="btn-change" type="button" value="Select good points" />
</div>

HTML DOM Button value Property, Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java  changing button text Depending on how you declare the button, you need to either use innerHTML, or the childNodes , or the value property of the button. Note: this tutorial has been tested with IE6 and Netscape 6.2 and 7, Firefox 1.04, and Opera 8 on the PC.

JavaScript DOM CSS, To change the style of an HTML element, use this syntax: This example changes the style of the HTML element with id="id1" , when the user clicks a button:  Definition and Usage. The value property sets or returns the value of the value attribute of a button. The value attribute specifies the underlying value that is associated with a button. Important: If you use the <button> element in an HTML <form>, different browsers will submit different values.

HTML DOM Input Button value Property, Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java  Javascript can be used to change the attribute(s) of a HTML element, such as a paragraph, a header, an image, or a list, or any various HTML elements. For example, by changing the src attribute of an img tag, we can change the image entirely to something else with Javascript.

JavaScript can change HTML content, Save Your Code. If you click the save button, your code will be saved, and you get an URL you can share with others. Save Cancel. By clicking the "Save" button​  Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML. w3schools .com THE WORLD'S LARGEST WEB DEVELOPER SITE

Comments
  • I don't think your value assignment in switch statements are correct. There is no getelementsbyclassname() method. [They are case sensitive] .For good case, the selector is just having btn-change without any selectors.
  • First of all, document.getelementsbyclassname does not exist (yes, case is important in JS), secondly it returns a node list/collection (please go read up on what that means, and how to work with those), and finally, what’s with the weird mixture of jQuery and "vanilla" JS anyway …?
  • When you try to change the button text, just use $(this).val("new text").
  • thanks for the details - I appreciate it, I'm just getting starting in this.