Javascript Onclick, won't work

Question

I'm using Bootstrap as framework.
I'm new in JS so help me out.

I need a "button value" to change when clicked.
Button looks like this:

<button id="btn_out" name="btn_in_out" class="btn btn-lg btn-danger primary col-xs-offset-7" type="submit" onclick="sayThanks()" value="out">Ut</button>

And here is my JS:

<script>
    function sayThanks(){
        var element = document.getElementByld('btn_out');
        element.innerHTML="Tack";
</script>

It's place between "head" tags.

Why doesn't it work?

Answer 1

Change getElementByld to getElementById (with an I) and close the function curly brace

function sayThanks(){
        var element = document.getElementById('btn_out');
        element.innerHTML="Tack";
  }

 function sayThanks(){ var element = document.getElementById('btn_out'); element.innerHTML="Tack"; } 

 <button id="btn_out" name="btn_in_out" class="btn btn-lg btn-danger primary col-xs-offset-7" type="submit" onclick="sayThanks()" value="out">Ut</button> 

Answer 2

You have misspelled the getElementById : getElementById not getElementByld

http://jsfiddle.net/hn0j9tra/

If you use inline javascript, you should provide an id as a parameters into your function:

<script>
    function sayThanks(id){
        document.getElementById(id).innerHTML="Tack";
    }
</script>

<button id="btn_out" name="btn_in_out" class="btn btn-lg btn-danger primary col-xs-offset-7" type="submit"  value="out" onclick="sayThanks(this.id)">Ut</button>

Working demo

Answer 3

You have couple of problems

1. getElementById misspelled

2.Missing closing }

function sayThanks(){
        var element = document.getElementById('btn_out');
        element.innerHTML="Tack";
  }

Answer 4

Well, it looks like you misstyped the function getElementBy l d and did not close the whole function itself. If you changed it to getElementById it is probably going to work.

<button id="btn_out" name="btn_in_out" class="btn btn-lg btn-danger primary col-xs-offset-7" type="submit" onclick="sayThanks()" value="out">Ut</button>

function sayThanks(){
    var tE = document.getElementById('btn_out');
    if (tE) tE.innerHTML = 'Tack';
}

Furthermore, I would just pass the element to the function instead of searching for it, since it is the caller anyway.

<button id="btn_out" name="btn_in_out" class="btn btn-lg btn-danger primary col-xs-offset-7" type="submit" onclick="sayThanks(this)" value="out">Ut</button>

function sayThanks(e){
    e.innerHTML = 'Tack';
}

Answer 5

I think this code will help you

html:

 <button id="btn_out" name="btn_in_out" class="btn btn-lg btn-danger primary col-xs-offset-7" type="submit"  value="out">Ut</button>

javascript:

document.getElementById("btn_out").onclick = sayThanks;

    function sayThanks(){
        this.innerHTML="Tack";
    }

Fiddle