Wątek przeniesiony 2023-03-28 20:46 z JavaScript przez Riddle.

Przełączanie checkboxa z niestandardowym .innerHTML

0

Witam.
Ten kod działa prawidłowo, na kliknięcie raz zamienia innerText przycisku na Aaa a raz na Bbb

<html>
<body>

<div id="chckbox" style="position:absolute;display:fixed;left:93%;top:6.2%;width:2.5%;height:3.5%;border-radius:8px 8px;background-color:RGB(0,0,22);color:white;cursor:pointer;z-index:9999;"
onClick="if(this.innerHTML==input_checkbox_unchecked){
this.innerHTML=input_checkbox_checked;}else{
this.innerHTML=input_checkbox_unchecked;};
alert(this.innerHTML);" >
<input  style='cursor:pointer;' type='checkbox' />


</div>
<script>
input_checkbox_checked="<button>Aaa</button>";
input_checkbox_unchecked="<button>Bbb</button>";
document.getElementById("chckbox").innerHTML=input_checkbox_unchecked;

</script>

</body>
</html>

Natomiast ten nie

<div id="chckbox" style="position:absolute;display:fixed;left:93%;top:6.2%;width:2.5%;height:3.5%;border-radius:8px 8px;background-color:RGB(0,0,22);color:white;cursor:pointer;z-index:9999;" 
onClick="if(this.innerHTML==input_checkbox_unchecked){
this.innerHTML=input_checkbox_checked;}else{
this.innerHTML=input_checkbox_unchecked;};
alert(this.innerHTML);texts[3].innerText=this.innerHTML;" >
<input  style='cursor:pointer;' type='checkbox' />
</div>
<script>
input_checkbox_checked="<input  style='cursor:pointer;' type='checkbox' checked='true' />";
input_checkbox_unchecked="<input  style='cursor:pointer;' type='checkbox' />";
document.getElementById("chckbox").innerHTML=input_checkbox_unchecked;
</script>

111111.jpg
Działający
111111a.jpg
Nie działający.

0

Daj proszę jakiś link do http://jsfiddle.net gdzie będzie to wrzucone - żeby można było pobawić się. W sensie - daj działający przykład, na którym możemy poćwiczyć.

1

Sprawdzasz if(this.innerHTML==input_checkbox_unchecked), i to jest Twój błąd.

.innerHTML może się zmienić po przypisaniu, np do znormalizowania HTML'a.

0

@Riddle: a nie to że klikam na <input> i to może coś mi źle porównywać .innerHTML a może trzeba, dać if(event.parentNode.innerHTML==input_checkbox_unchecked)? Z drugiej strony dałem właśnie zapis do okna "Konsola" żeby pokazywało mi ten this.innerHTML.
"może się zmienić" - w pierwszym przykładzie nic się nie zmienia.

1

nic się nie zmienia.

Przeglądarka normalizuje dwie spacje za <input do jednej (co zresztą widać w tym alecie, który dorzuciłeś) i dlatego porównanie nie działa.

Generalnie porównywanie HTMLa jest dosyć... złym rozwiązaniem (choćby właśnie z racji bycia delikatnym) - dlaczego zamiast tego po prostu nie odczytasz właściwości checked tego checkboxa wewnątrz?

0

Bo ja już przerobiłem pracę z checkboxem(na przykładzie kilku). To co robię jest jedynym sensownym rozwiązaniem. Próbowałem za pomocą JS sprawdzać zaznaczenie kilku i zaznaczając jedno odznaczać pozostałe, to nie działa w normalny spsób. A stworzyłem ten wątek, żeby poznać "naturę" tego checkboxa. Dałem to samo pytanie kolesiowi z jakiejś ponoć profesjonalnej firmy . Wszystko dla wiedzy

1

To co robię jest jedynym sensownym rozwiązaniem.

To co robisz jest niestety najmniej sensownym rozwiązaniem i nie rozumiem dlaczego się przy nim upierasz 👀

<div id="chckbox" style="position:absolute;display:fixed;left:93%;top:6.2%;width:2.5%;height:3.5%;border-radius:8px 8px;background-color:RGB(0,0,22);color:white;cursor:pointer;z-index:9999;" onClick="toggleCheckbox()" >
    <input style='cursor:pointer;' type='checkbox' />
</div>

<script>
function toggleCheckbox() {
    let checkbox = document.querySelector('#chckbox input');
   
    checkbox.checked = !checkbox.checked;
}
</script>

Próbowałem za pomocą JS sprawdzać zaznaczenie kilku i zaznaczając jedno odznaczać pozostałe, to nie działa w normalny spsób

Do tego akurat nie potrzebujesz ani grama JSa (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio).

1
johnny_Be_good napisał(a):

Mimo to dałeś przykład z JS. Znaczy w głowie masz to rozwiązanie z mozilli. Znaczy, że teoretyzujesz mój drogi.

Pokazałeś swój kod, w którym porównujesz .innerHTML przy użyciu ==.

@Patryk27 zasugerował Ci, że jeśli już chcesz to robić w JS, to mógłbyś np porównać .checked z inputów i podał Ci przykład. To jest dobre podejście.

Następnie spojrzeliśmy z większej perspektywy - wyjaśniłeś, że Tobie po prostu chodzi o zrobienie pola pojedynczego wyboru (czyli że jak zaznaczysz inne pole, to aktualne się odkliknie). I rozwiązanie na taką funkcjonalność istnieje od HTML 1.0, i nazywa się to "radio button", dodawane kodem <input type="radio"/> - więc jeśli chcesz wprowadzić funkcjonalność pojedynczego zaznaczenia, to nie musisz tego sam oprogramowywać, tylko możesz użyć właśnie HTML'a - i dostałeś link do dokumentacji tego jak użyć "radio" w <input/>.

johnny_Be_good napisał(a):

Dajesz przykład ze skryptem, za chwilę stronę z sieci,

Dostałeś dwa potencjalne rozwiązania:

  • jedno, gdybyś został przy pisaniu tego w JS' żeby rozwiązać Twój problem z pytania
  • drugie, gdybyś chciał to zrobić tak jak się to powinno robić, czyli przy użyciu radio-button

Masz wybór - możesz wybrać które Ci bardziej pasuje.

johnny_Be_good napisał(a):

przeanalizowałeś w parenaście sekund rozwiązanie mozlilli? Ale działa, to co na stronie.

Patryk nie musiał nic analizować, i to nie jest rozwiązanie mozilli.

Proces myślowy był zupełnie inny: powiedziałeś że chcesz pojedyncze zaznaczenie, Patryk polecił Ci "radio" z HTML'a, i podesłał opisaną dokumentację - bo akurat Mozilla pisze w miare sensowne dokumentacje o webówce - ale to nie jest ich rozwiązanie.

johnny_Be_good napisał(a):

Wygląda na to, że próbowałem użyć checkbox zamiast radio. Mimo to koleś z YouTube nie nakierunkował mnie na to "radio", mimo, że mu napisałem, że chodzi o wybór jednego z kilku. To klienta też nie nakierunkuje.

Fakt, zostałeś bardzo tragicznie oszukany przez twórcę tego filmiku.

Swoją drogą, ten filmik nazywa się "Od czego zacząć naukę programowania", ale to co on tam robi to za wiele z programowaniem nie mają.

0

"Fakt, zostałeś bardzo tragicznie oszukany przez twórcę tego filmiku." - wyciągnąłem wnioski i się z Wami nimi podzieliłem. Nie oczekuję, że to docenisz bo wiem czego się po Tobie spodziewać - mam rację, czy nie mam racji? Twój wpis jest odpowiedzią na to pytanie - merytorycznie opdowiadasz "Fakt, zostałeś bardzo tragicznie oszukany przez twórcę tego filmiku.".

"Pokazałeś swój kod, w którym porównujesz .innerHTML przy użyciu ==." mam pisać listę co zrobiłem zanim zapytałem? Tak m.i.n dawałem tam "innerHTML.toString() przy użyciu ==". I wiele innych rzeczy.

Sprawdziłem ten kod Patryka i nie działa. Dawanie pozornego wyboru to jest już coś (co jeśli robisz świadomie) co w Tobie jestem w stanie zaaceptować, bo czymś się zaczynasz wyróżniać.
No co mam napisać, skopiowałem to co Patryk wkleił to z toggle() do w3schools i nie działa, nie zaznacza. Ale działa tak jak przeczuwałem(czyli nie działa). Bo atrybut nie odpowiada własności i to nie jest to samo co jak się samemu ustawi input.checked=0;(co ostatecznie zrobiłem).

"Patryk nie musiał nic analizować" - mózg to co odbiera przez zmysły wzroku, słuchu, smaku analizuje więc to jest nieprawda co piszesz.

"Swoją drogą, ten filmik nazywa się "Od czego zacząć naukę programowania", ale to co on tam robi to za wiele z programowaniem nie mają." - coś robi i się z tym nie kryje, tu już jest materiał nad którym mam okazję, przyjemność pracować, ale tego pewnie też nie zrozumiesz. To już jest rodzaj tej "gliny" która wymaga większego wysiłku. Sportowcy podnoszą coraz większe ciężary bez powodu?

0

Sprawdziłem ten kod Patryka i nie działa.

not sure what you mean, wszystko działa dobrze - https://jsfiddle.net/9g0yo6mz/ 🙃
(musisz jednak kliknąć na diva, a nie checkbox - tak jak najwyraźniej chciałeś)

Ale działa tak jak przeczuwałem(czyli nie działa). Bo atrybut nie odpowiada własności i to nie jest to samo co jak się samemu ustawi input.checked=0;(co ostatecznie zrobiłem).

Zapytałbym nawet co to znaczy atrybut nie odpowiada własności, ale w sumie szkoda mi czasu na dalszą dyskusję z Tobą.

1 użytkowników online, w tym zalogowanych: 0, gości: 1