JS onclick event

Question

Witam,

Mam taki oto kod:

var btn, hmI, clrI;

function initialize() {
  document.head.innerHTML+="<style>#overlay{position:absolute;display:block;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background-color:transparent;z-index:10;pointer-events:none;}</style>"
  document.body.innerHTML += '<div id="overlay"></div>';
}

function recolor(red, green, blue, howMuch) {
  var ol = document.getElementById("overlay");
  ol.style.backgroundColor = "rgba(" + red + ", " + green + ", " + blue + ", " + howMuch/100 + ")";
}

function overlayOn() {
  document.getElementById("overlay").style.display = "block";
}
function overlayOff() {
  document.getElementById("overlay").style.display = "none";
}

window.onload = function() {
  clrI = document.getElementById("clr");
  hmI = document.getElementById("hm");
  btn = document.getElementById("btn");
  btn.onclick = function() {
    var hex = clrI.value;
    var rgb = hexToRgb(hex);
    var r = rgb.r;
    var g = rgb.g;
    var b = rgb.b;
    var hm = hmI.value;
    recolor(r, g, b, hm);
  };
  
  initialize();
};

function hexToRgb(hex) {
  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result
    ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
      }
    : null;
}

Część mam z internetu, część napisałem sam. Nie działa mi zdarzenie onclick. Czy mam jakiś błąd?

Z góry dziękuję za odpowiedź.

Comments

Czy w konsoli przeglądarki są jakieś błędy? W którym miejscu kodu HTML podpinasz ten skrypt? Co konkretnie nie działa?

---

Nie ma żadnych błędów, a nie działa to że jak klikam <button></button> to nic się nie dzieje mimo, że btn.onclick jest zdefiniowane (sprawdzałem)

---

A czy funkcja podpięta do onclick jest w ogóle wołana? Możesz pokazać kod HTML tego przycisku?

Czy jeśli zakomentujesz wywołanie funkcji initialize, to wtedy działa?

---

Sorki że teraz dopiero, oto kod przycisku (i reszty) :

      <p>
        Enter color:
      </p>
      <input type="color" id="clr">
      <p>
        Enter how much:
      </p>
      <input type="range" min="0" max="100" value="10" id="hm">
      <button id="btn">
        Color!
      </button>

 

---

O, i teraz zauważyłem, że nawet jak się sztucznie wywoła onclick to i tak wywołuje się tylko raz

---

Czy możesz odpowiedzieć na pytanie, czy przy zakomentowanej funkcji initialize obsługa kliku działa?

nawet jak się sztucznie wywoła onclick to i tak wywołuje się tylko raz

A gdzie i jak sztucznie wołasz onclick? 

---

Przy zakomentowanym initialize działa, sztucznie wywołuję onclick w konsoli

Answer 1

Użycie innerHTML w funkcji initialize zastępuje obecny (sparsowany) kod HTML nowym z dodaną treścią, co powoduje że wcześniej podpięty click na przycisku przestaje działać.

Zastąpiłbym to metodą appendChild i dodał do DOM gotowy obiekt. Przy okazji, analogicznie zrobiłbym to samo dla document.head.innerHTML (chyba, że masz jakiś dobry powód na użycie tutaj innerHTML) - jeśli chcesz dynamicznie dodać style, to również użyj appendChild i rozważ podpięcie CSS'a jako zewnętrzny styl, zamiast dodawać go w formie wewnętrznego kodu.