Why does the code not work? I'm shocked. Such a simple elementary problem, and the brain refuse to think.

HTML:

<span id="text">ΠœΠΎΡ‘ Π½ΠΎΠ²ΠΎΠ΅ ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅</span> <br /> <br /> <button onclick="javascript: i1('ΠΌΠΎΡ‘', '#000', '12');"> Π§Ρ‘Ρ€Π½Ρ‹ΠΉ, 12 пиксСлСй </button> <br /> <br /> <button onclick="javascript: i1('Π½ΠΎΠ²ΠΎΠ΅', '#F00', '48');"> ΠšΡ€Π°ΡΠ½Ρ‹ΠΉ, 48 пиксСлСй </button> <br /> <br /> <button onclick="javascript: i1('ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅', '#FFF', '16');"> Π‘Π΅Π»Ρ‹ΠΉ, 16 пиксСлСй </button>

Javasctipt:

 function i1(i1, i2, i3) { var i4 = document.getElementById("text"); i4.innerHTML = i4.innerHTML.replace(i1, "<span style=\"color: " + i2 + "; font-size: " + i3 + "px;\">" + i1 + "</span>"); return; }

    1 answer 1

    By default, JSFiddle wraps what you put in the "Javascript" field in window.onload .
    Therefore, your i1 function becomes visible not globally, but locally in a closure. And in the handler you call global.
    This JSFiddle behavior can be changed by clicking on the gear next to the word "Javascript" in the "Javascript" field and changing the value of the Load Type combo box. For example, on no wrap in <body> .

    Like this:

    enter image description here

    • It should be added that without changing the settings for the js-code (wrapping in window.onload it can be very useful) to declare functions in the global scope as follows: window.i1 = function(...){...} - Ivan Pshenitsyn