In JS, I wrote a function that creates a div1 layer with id = div1. After that, the function below stopped working.

function div1() { var a = document.getElementById('div1'); a.style.backgroundColor = 'rgb('+getRand(0, 255)+','+getRand(0, 255)+','+getRand(0, 255)+')'; }

As I understand it, div1 is now missing in the HTML document, since it has not yet been created. How to fix this function, so that the element would be taken not from the document and from the function in JS?

UPD:

 var hide=true; function movePic(word){ _x=window.event.clientX; _y=window.event.clientY; _dx=5; left=false;right=false; if(_dx+_x+tool.clientWidth>document.body.clientWidth){_x=document.body.clientWidth-tool.clientWidth-_dx;left=true;} if(_dx+_y+tool.clientHeight>document.body.clientHeight){_y=document.body.clientHeight-tool.clientHeight-_dx;right=true;} if(left&&right)_y=document.body.clientHeight-tool.clientHeight-_dx*4; tool.style.left=_x; tool.style.top=_y+document.body.scrollTop; if(hide){ tool.innerHTML=word; tool.style.visibility="visible"; hide=false; } } function hidePic(){ tool.style.visibility="hidden"; tool.innerHTML=""; tool.style.top=0; tool.style.left=0; hide=true; } function createElem() { var parent = document.getElementsByTagName('BODY')[0]; var div1 = document.createElement('DIV'); var divtwo = document.createElement('DIV'); var div3 = document.createElement('DIV'); var div4 = document.createElement('DIV'); var div2 = document.createElement('DIV'); div2.id = 'div2'; div2.style.position='absolute'; div2.style.backgroundColor='#00F'; div2.style.width='120px'; div2.style.height='60px'; div2.style.textAlign='center'; div2.style.lineHeight='60px'; div2.onmousemove = function (){movePic('ToolTip')}; div2.onmouseout = function (){hidePic()}; div2.onclick = function (){div2()}; div3.id = 'div3'; div3.style.position='absolute'; div3.style.backgroundColor='#FF0'; div3.style.width='68px'; div3.style.height='98px'; div3.style.textAlign='center'; div3.style.lineHeight='98px'; div3.style.top='62px'; div3.onmousemove = function (){movePic('ToolTip')}; div3.onmouseout = function (){hidePic()}; div3.onclick = function (){div3()}; div4.id = 'div4'; div4.style.position='absolute'; div4.style.backgroundColor='#096'; div4.style.width='49px'; div4.style.height='98px'; div4.style.textAlign='center'; div4.style.lineHeight='98px'; div4.style.top='62px'; div4.style.left='70px'; div4.onmousemove = function (){movePic('ToolTip')}; div4.onmouseout = function (){hidePic()}; div4.onclick = function (){div4()}; divtwo.id = 'divtwo'; divtwo.style.position='absolute'; divtwo.style.width='120px'; divtwo.style.height='160px'; divtwo.style.left='160px'; div1.id = 'div1'; div1.style.position = 'absolute'; div1.style.backgroundColor = '#F00' ; div1.style.width='120px'; div1.style.height='160px'; div1.style.textAlign = 'center'; div1.style.lineHeight='160px'; div1.onmousemove = function (){movePic('ToolTip')}; div1.onmouseout = function (){hidePic()}; div1.onclick = function (){div1()}; var text1 = "DIV1"; var text2 = "DIV2"; var text3 = "DIV3"; var text4 = "DIV4"; var textNode = document.createTextNode(text1); var textNode2 = document.createTextNode(text2); var textNode3 = document.createTextNode(text3); var textNode4 = document.createTextNode(text4); div1.appendChild(textNode); div2.appendChild(textNode2); div3.appendChild(textNode3); div4.appendChild(textNode4); divtwo.appendChild(div2); divtwo.appendChild(div3); divtwo.appendChild(div4); parent.appendChild(div1); parent.appendChild(divtwo); } function getRand(min, max){ return Math.round(Math.random()*(max-min))+min; } function div1() { var a = function (){createElem()}.getElementById('div1'); a.style.backgroundColor = 'rgb('+getRand(0, 255)+','+getRand(0, 255)+','+getRand(0, 255)+')'; } function div2() { var a = document.getElementById('div2'); a.style.backgroundColor = 'rgb('+getRand(0, 255)+','+getRand(0, 255)+','+getRand(0, 255)+')'; } function div3() { var a = document.getElementById('div3'); a.style.backgroundColor = 'rgb('+getRand(0, 255)+','+getRand(0, 255)+','+getRand(0, 255)+')'; } function div4() { var a = document.getElementById('div4'); a.style.backgroundColor = 'rgb('+getRand(0, 255)+','+getRand(0, 255)+','+getRand(0, 255)+')'; }
  • The function can lead? or at least its name. - Sh4dow
  • function createElem () this function creates a div1 element with ID = div1 - Afimida
  • @Afimida, Add to your question the entire program algorithm that deals with this problem. - Nicolas Chabanovsky ♦
  • Now add. More precisely I will edit. - Afimida
  • Here is the code. function div1 () is my experiment on a call unsuccessful, though js works does not complain. - Afimida

2 answers 2

  1. The div is called tolna when onclick on the same diva. So to say that it is not created - it is impossible. Therefore you have some other mistake.

  2. Read about javascript bind as a result, you can not do

    var a = document.getElementById ('div1');

and instead just write this

3

 div1.style.position = 'absolute'; div1.style.backgroundColor = '#F00' ; div1.style.width='120px'; div1.style.height='160px'; div1.style.textAlign = 'center'; div1.style.lineHeight='160px'; ....

For God's sake, use it instead

 div1.className = 'class-for-div1';

well and appropriately add in css

 .class-for-div1 { position: absolute; background-color: #F00; width: 120px; height: 160px; text-align: center; line-height: 160px; }
  1. I did not understand what and because of what does not work. Since the above code is a function div1 and in the lower code is a function div1, and they are completely different
  2. you have a function and a variable have the same name, this should be avoided in every way.
  3. var a = function () {createElem ()}. getElementById ('div1'); - how strange it looks

PS: I did not run anything and did not check, said "by eye" maybe somewhere and not right

  • I do not know how to thank you, but your comment was on my notepad, and the change of function names helped. Thank you very much! - Afimida

Use jQuery. Your code will decrease several times and all questions will disappear by themselves.

  • Use jquery without knowing the basics of js? Great advice. - Sh4dow
  • one
    So he knows something, since he wrote such lines of code :) But in general, it may make sense to study jquery and js together, especially since the first is the library of the second !!! I do what it is - on jquery this is really easier to solve. If all the same you need on pure js, then you should think about whether you need to dynamically create divs at all ??? It may make sense to create them when shaping the page and make them invisible, and then manipulate them. Then in this case it is better to use display - ikot instead of the visibility property.
  • one
    Fully agree with ikot. Everything you do is no good. And by the way, jquery did not free anyone from knowing the language, moreover, there is an opportunity to learn how to make things higher. - Arni