I am just trying to pass some javascript value from function func() to the tag "p".But it's not happening.Can anyone help me with this?

Question

A part of the Html body:

<div id="d">
    <div class="imge">
        <img src="meter.jpg" width="450" height="350" alt="" />
        <h2>1234578  kWh</h2>
    </div>
</div>

This is the javascript function.

function func()
{
 document.getElementById("d").getElementsByClassName("imge").getElementsByTagName("h2")[0].innerHTML="String"
}

Is the above syntax correct?

Thanks in advance

Answer 1

document.getElementsByClassName method returns a HTMLCollection, so you at least need to use some index, like [0] to get the first element from this collection:

document.getElementById("d").getElementsByClassName("imge")[0].getElementsByTagName("h2")[0].innerHTML="String"

However it's much more convenient to use querySelector to retrieve HTML element by CSS selector:

function func() {
    document.querySelector('#d .imge h2').innerHTML = "String";
}

Answer 2

The code in func() should be document.getElementById("d").getElementsByClassName("imge")[0].getElementsByTagName("h2")[0].innerHTML="String"

as getElementsByClassName returns an array