Getting value as undefined in Javascript

Question

I'm trying to manipulate value of a button in JS from HTML.

HTML Code:

<div onclick= "classToggle()" type="button" id="show-more">Show more</div>

The output I'm getting for elem is undefined.

JS Code:

function classToggle() {
    var elem = document.getElementById('show-more').value;
    alert(elem);
    if (elem.value == "Show more") elem.value = "Show less";
    else elem.value = "Show more"; }

Answer 1

You are trying to get the value of a div which is not possible. In order to get the text in it, you should be using innerHTML as follows:

 function classToggle() { var elem = document.getElementById('show-more'); alert(elem.innerHTML); if (elem.innerHTML == "Show more") elem.innerHTML = "Show less"; else elem.innerHTML = "Show more"; }

 <div onclick= "classToggle()" type="button" id="show-more">Show more</div>

Answer 2

Use innerHTML instead of value

 function classToggle() { var elem = document.getElementById('show-more'); alert(elem.innerHTML); if (elem.innerHTML == "Show more") elem.innerHTML= "Show less"; else elem.innerHTML = "Show more"; }

 <div onclick= "classToggle()" type="button" id="show-more">Show more</div>