document.getElementById(ID).innerHTML = " CHANGE ";

Question

https://code.sololearn.com/We03odWIM8ON/?ref=app

why innerHTML cannot work?
how i can fix the problem?

Answer 1

There has to be id attrbute to h1 tag so that you can access it using getElementById ..

First put an id attribute

<h1 id = "heading" .......> ....</h1>

Then access that element

function m1(){
document.getElementById("heading").innerHTML = "changed"
}

Even without ID attribute . you can Use document.querySelector('h1') to access h1 element

Answer 2

Shakibur Rahman here is a good answer, which can clear your confusion on this. It cleared mine too. 🙂

https://stackoverflow.com/questions/40399875/why-can-you-chain-some-javascript-methods-but-not-others

Traditional Tactation bro, I think it doesn't depend on how we write the code. Even I also faced the same problem multiple times. (It's a maybe type opinion)

Answer 3

Hi Shakibur Rahman , can you please show us your code.

https://www.sololearn.com/post/1115272/?ref=apphttps://www.sololearn.com/post/1116418/?ref=app

Be like Bill and ___

Answer 4

I think that you want that when someone click h1 ,then it change , so your code is not working coz you have not given ID of <h1> tag

You can simply do like this - https://code.sololearn.com/WXFqvjclEtC9/?ref=app

How to select ID -
https://code.sololearn.com/WvaFOE0P5GB4/?ref=app

Answer 5

Can you provide some more details regarding your problem?

Answer 6

Traditional Tactation
🅰🅹 🅐🅝🅐🅝🅣
Aravind Shetty

thanks buddies

Answer 7

part 1/3

Shakibur Rahman access on html elements through JS could be a few tricky, depending on when code getting element reference ran...

when html is parsed by browser, js codes inside 'script' tags (either embeded or linked) run as soon as encountered: not necessarly when all DOM was builded... and all elements have still references accessible ^^

in (at least android) sololearn app', the JS tab code is auto-inserted inside 'script' tag at 'head' html section, meaning that 'body' nor any of its children are currently available in JS global scope code (not the case from inside function called through event attributes inlined in html)...

one simple (and recommended) way to avoid problems, is to avoid as much as possible use of the global scope, but you could even define functions run defered through events of 'window' (root) global object, such as 'onload' wich will run as soon as all page has been parsed (and all assets have been loaded or failed)...

[ end of part 1 ] (to be continued in next post...)

Answer 8

part 2/3

onload = () => {
/* most of JS inside */
};

make your JS code in a (private) local scope, from wich you can get DOM references safely, but none of each content can be accessible from outside: function called (or variables accessed) from html inlined events must have at least a link to them in the global scope, or better to attach event listener through js code embeded in the 'onload' function scope ;)

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

obviously, the event target element on wich you call this method have to be retrieved its DOM reference...

there are many ways to achieve this:

document.getElement(s)By... family methods can retrieve such reference(s) by any id, tagname, classname: only byId give a direct reference (as supposed to be unique, return the first one matching the provided id matching), both others (get 's' to 'Elements' before 'By' in method name) return an array-like list of all matching elements...

[end of part 2] (to be continued...)

Answer 9

part 3/3

[document or element].querySelector and .querySelectorAll (return respectively a direct reference of first encountered matching element and array-like list of all matching elements) apply to any element wich act as root for the search inside its descendants...

also, elements wich have id defined with a name following the JS naming convention/syntax are implicitly declared as variable of same name in the global scope, until you declare explicitly variables of those names at this scope...

an element with id "myId" could so be accessed directly in JS by accessing the variable 'myId', until you declare this name in the global scope (var, let, const declaration or implicite by forgotting declaration)

in local scope, you cannot access those prefilled variables by using only the name if you declare same name locally, but global value could still be accessed through the global 'window' object by using either dot or square bracket notation ;)

useful related links:
https://code.sololearn.com/WihQKRdFBe98/

Answer 10

Aravind Shetty
Traditional Tactation
Genuine Stalwart
https://code.sololearn.com/We03odWIM8ON/?ref=app

Answer 11

Shakibur Rahman

Write JS code inside window.onload function because JavaScript is loading before loading html content. So do this:

window.onload = function () {
document.getElementById("H1").innerHTML = "shishir";
}

Answer 12

visph Thanks man.