• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

JS onclick event

Aruba Cloud - Virtual Private Server VPS
+1 głos
612 wizyt
pytanie zadane 2 lutego 2021 w JavaScript przez hihijsonel Obywatel (1,250 p.)

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ź.

komentarz 2 lutego 2021 przez ScriptyChris Mędrzec (190,190 p.)

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

komentarz 2 lutego 2021 przez hihijsonel Obywatel (1,250 p.)
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)
komentarz 2 lutego 2021 przez ScriptyChris Mędrzec (190,190 p.)

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?

komentarz 2 lutego 2021 przez hihijsonel Obywatel (1,250 p.)

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>

 

komentarz 2 lutego 2021 przez hihijsonel Obywatel (1,250 p.)
O, i teraz zauważyłem, że nawet jak się sztucznie wywoła onclick to i tak wywołuje się tylko raz
komentarz 2 lutego 2021 przez ScriptyChris Mędrzec (190,190 p.)

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? 

komentarz 2 lutego 2021 przez hihijsonel Obywatel (1,250 p.)
Przy zakomentowanym initialize działa, sztucznie wywołuję onclick w konsoli

1 odpowiedź

+2 głosów
odpowiedź 2 lutego 2021 przez ScriptyChris Mędrzec (190,190 p.)
wybrane 3 lutego 2021 przez hihijsonel
 
Najlepsza

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.

Podobne pytania

0 głosów
1 odpowiedź 282 wizyt
0 głosów
2 odpowiedzi 598 wizyt
pytanie zadane 22 maja 2020 w JavaScript przez rob Bywalec (2,440 p.)
0 głosów
1 odpowiedź 539 wizyt
pytanie zadane 13 listopada 2018 w JavaScript przez FroGiS Użytkownik (810 p.)

93,327 zapytań

142,323 odpowiedzi

322,393 komentarzy

62,655 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...