My button does nothing when i click on it

I have a button

<script>
function changeMap() {
 container.setMap(oMap); 
}   
</script>
<button onClick="changeMap"> Click here </button>

The content of container is correct. it has a control. The set Map property exists from what i see in the console.

When the page loads all is correct. but when i click the button the property doesn't set OR the content of the page doesn't change.

Do i need to load some other way? Thank you in advance :)

Answers 1

  • The attribute is called onclick not onClick, Apparently html attributes are fully case insensitive, so both will work.

    However you also need parentheses after the name of the function.

    <button onclick="changeMap(event)">Click Here</button>
    

    here the event is a browser global that allows us to pass an event to the handler. In your case, you aren't using the event, so it is not necessary.

    Please also note that if you add the event in javascript, you will not use the parentheses.

    I have included a demo of three different ways to add a click handler to a button below.

    function log(message){
       var line = document.createElement('div');
       var text = document.createTextNode(message);
       line.appendChild(text);
       messages.appendChild(line);
    }
    
    function handleClick(e){
       log("Click from " + e.target.id);
    }
    
    // add an event listener to b2
    b3.onclick = handleClick;
    
    // add an event listener to b3
    b4.addEventListener('click', handleClick);
    <button onclick="handleClick(event);" id="b1" >Button 1</button>
    <button onClick="handleClick(event);" id="b2" >Button 2</button>
    <button id="b3">Button 3</button>
    <button id="b4">Button 4</button>
    
    <div id="messages">
    </div>


Related Articles