Good night!

When parsing a seemingly lightweight script, I found an not quite clear moment for myself.

Javascript :

 var planetList = new Array(); planetList[0] = 'ΠœΠ΅Ρ€ΠΊΡƒΡ€ΠΈΠΉ'; planetList[1] = 'Π’Π΅Π½Π΅Ρ€Π°'; planetList[2] = 'ЗСмля'; planetList[3] = 'ΠœΠ°Ρ€Ρ'; var wayToSun = new Array(); wayToSun[0] = '52 ΠΌΠ»Π½.ΠΊΠΌ'; wayToSun[1] = '108 ΠΌΠ»Π½.ΠΊΠΌ'; wayToSun[2] = '149 ΠΌΠ»Π½.ΠΊΠΌ'; wayToSun[3] = '228 ΠΌΠ»Π½.ΠΊΠΌ'; var planetDiameter = new Array(); planetDiameter[0] = '4 880 ΠΊΠΌ'; planetDiameter[1] = '12 100 ΠΊΠΌ'; planetDiameter[2] = '12 750 ΠΊΠΌ'; planetDiameter[3] = '6 800 ΠΊΠΌ'; function doCount(){ var userText = document.getElementById('planetName').value; for( var i = 0; i < planetList.length; i++) { if(planetList[i] == userText){ break; } } document.write('<p class="hightlight">'+planetList[i]+'</p>'); document.write('<p class="hightlight">РасстояниС Π΄ΠΎ солнца: '+wayToSun[i]+'</p>'); document.write('<p class="hightlight">Π”ΠΈΠ°ΠΌΠ΅Ρ‚Ρ€ ΠΏΠ»Π°Π½Π΅Ρ‚Ρ‹: '+planetDiameter[i]+'</p>'); }

HTML :

 <label for="planetName">Π’Π²Π΅Π΄ΠΈΡ‚Π΅ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΠΏΠ»Π°Π½Π΅Ρ‚Ρ‹:</label> <input type="text" id="planetName" name="planetName" /> <input type="button" id="counter" value="Π Π°ΡΡΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ" onclick="doCount()"/>

As I said everything to the banality is simple, mat.part so say. But the situation why the script stops β€œworking” when the userText variable userText declared outside the function body (if I understand correctly, in this case it is global), I can’t master it.

  • Does it exist outside the function body? Is it created in some kind of closure? Try explicitly assigning it to a window object: window.userText = document.getElementById ('planetName'). Value; var foo = window.userText; - neoascetic
  • That's the point. if it is declared outside the function body, then its value is null . this is an incomprehensible moment. according to my idea, it should be global and be accessible function. - LeD4eG
  • Hmm, null or still undefined ? Create a jsfiddle , we'll see. - neoascetic

2 answers 2

We need the input value after clicking the button, right? It does not need to receive in advance , it makes no sense. The matter is not even in the DOM, as I wrote first (I will not delete that part of the answer, it will suddenly come in handy).

Compare two fiddles: defining a variable inside a function and outside . (To handle the onclick event, jQuery was closed due to troubles with iframes, but this does not affect the final result).

In the first variant, we select the desired element after clicking on the key when the DOM tree is already built (and this element is present in the document).

In the second, we select the element right away, despite the fact that maybe it is not yet present in the DOM, which gives us the value undefined .

That is - you need to wait until the desired element is available in the DOM, then only do a selection. Options:

  • wait for the document.ready event (preferred)
  • move JS to the end of the page (or at least insert it after the html element is declared)
  • no, no, no, it will go like this) The first part of your answer is the Tesx part of my question) I was just β€œplayed” with the location of the userText variable (declared it outside the function body and in it), so your fiddle was shown what I have already seen). But you helped me deal with this problem. for that plus!) - LeD4eG
  • I don't understand ... Was there a problem? - neoascetic
  • was!) the mechanism was not clear, but I quickly understood what was happening with you) thanks! - LeD4eG

Pre-scriptum I am writing this answer in order to tell what I understood and try to convey this to a person who will be interested in something similar.

The point here is not in the scope (in this I was absolutely wrong), but in the events! In fact, an userText should occur to initialize the userText variable. Add a simple function that will "pick up" the value of the field before pressing the button:

Javascript

 function getText(){ userText = document.getElementById('planetName').value; }

That's all. Now you can declare a variable to the body of all functions in which it is used, place the script itself in any part of the page ( @neoascetic wrote this way).

And the problem I mentioned in the question did not occur because the element did not exist in the DOM tree (more precisely, not only because of this, I will explain later). That's why initially the value of the userText variable was userText value undefined , and since the change of the variable was not monitored at all, this problem arose (but I’m going back to the events again). The cycle should return the value of i to determine if the string entered by the user matches the elements of the array, no match - we get i==undefined . That is the point.

But the end of building a DOM tree still plays its part. If the value is initially a value attribute of a text field, the string: (outside the body of the doCount() function)

 var userText = document.getElementById('planetName').value;

will also assign a null value to a variable. But if you write the following before the above function:

 var userText; function getValue(){ userText = document.getElementById('planetName').value; }

and call this function after creating the text field (place the <script> with the call to the getValue() function after the corresponding input , everything will work again. We get a global variable that is initialized to the default value and then passed to the loop for match search.

This is, at first glance, a simple task from the materiel, but with pitfalls. I hope I managed to describe the essence of the problem in sufficient detail and clearly.

  • Not null , but undefined . - neoascetic
  • Yes, you are quite right, because the element at the time of initialization does not yet exist. - LeD4eG
  • But it's better to use jQuery, document.ready and enjoy programming - neoascetic
  • yes I know. The goal is to learn javascript . - LeD4eG