Javascript function to change Caption

user_14297062 0
Viewed 143

function change_text(a){

    if (a == Canberra){
        var x = document.getElementById("a");
        document.x.innerHTML = "Correct!";
    }

    else{
        var x = document.getElementById("a");
        document.x.innerHTML = "Incorrect!";
    }
}

  
  <figure>
             <button onclick="change_text(Melbourne)"> Melbourne! </button>
             <figcaption id="Melbourne"> &nbsp; </figcaption>
     </figure>


    <figure>
            <button onclick="change_text(Canberra)"> Canberra! </button>
            <figcaption id = "Canberra"> &nbsp; </figcaption>
    </figure>

Hello, i am new to JS/HTML. I intended to create some buttons with a captions. But the captions should only appear when a corresponding button is clicked. So far it was the easiest to take the figure tag, to have the caption right below the button. The function should take as parameters, the city name and depending on which button pressed the caption should show/change to correct/incorrect.

I am really new to this and i do not understand if anything here what i did makes sense, so i am thankful for any help.

button html javascript
2 Answers

Try like this. Your code have some syntax errors. First change_text(sometext). Change this change_text('sometext'). And in if operation change if(a == sometext) to if(a == 'sometext') And Change document.x.inerHTML to x.innerHTML

    function change_text(a){
       
        if (a == "Canberra"){
            var items = document.getElementsByClassName(a);
            console.log(items)
            Array.prototype.forEach.call(items, function(item) {
            item.innerHTML="Correct!";})
        }

        else{   
            var items = document.getElementsByClassName(a);
            Array.prototype.forEach.call(items, function(item) {
            item.innerHTML="Incorrect!";})      
        }
    }
    
      <figure>
                 <button onclick="change_text('Melbourne')"> Melbourne! </button>
                 <figcaption class="Melbourne"> &nbsp; </figcaption>
                 <figcaption class="Melbourne"> &nbsp; </figcaption>
         </figure>


        <figure>
                <button onclick="change_text('Canberra')"> Canberra! </button>
                <figcaption class="Canberra"> &nbsp; </figcaption>
                <figcaption class="Canberra"> &nbsp; </figcaption>
        </figure>

user_155795730

first problem is you are using document.getElementById("a") which is wrong, there are no elements that have the id of "a" here. so you need to use document.getElementById(a) instead

second problem is you are using document.x.innerHTML it should be x.innerHTML instead

third problem is you need to use quotes "" in the if statement like this if (a === "Canberra")

code:

function change_text(a){

         if (a === "Canberra"){
             var x = document.getElementById(a);
             x.innerHTML = "Correct!";
         }

         else{
             var x = document.getElementById(a);
             x.innerHTML = "Incorrect!";
         }
 }
user_153666350
Related