Näytä yksi teksti ja piilota muut

Anonyymi

Sivulla on monta radio buttonia, joiden perässä on näkymätön label-elementti. Kun käyttäjä klikkaa radio nappulaa, haluan sen perää ilmestyvän tekstin ja tekstin muiden radio nappuloiden perästä katoavan. Alla olevalla esimerkillä teksti ilmestyy näkyviin, mutta miten saan esim a1 ja a3 tekstin katoamaan samalla kun a2 muuttuu näkyväksi?

JS:
function show_a1(){ document.getElementById('a1').style.display = 'block'; }
function show_a2(){ document.getElementById('a2').style.display = 'block'; }
function show_a3(){ document.getElementById('a2').style.display = 'block'; }

HTML:
<input type='radio' onclick='show_a1();' >
<span id='a1' style='display: none;'>Joku teksti</span>

<input type='radio' onclick='show_a2();' >
<span id='a2' style='display: none;'>Joku teksti</span>

<input type='radio' onclick='show_a3();' >
<span id='a3' style='display: none;'>Joku teksti</span>

12

335

    Vastaukset

    Anonyymi (Kirjaudu / Rekisteröidy)
    5000
    • Lisää funktiohin muiden elementtien piilotus.

    • Anonyymi

      Taas on tullut voimaan se sääntö että ei voi opastaa antamalla koodi esimerkin, mutta avauksessa se saa tämänkin säännön mukaan olla. Voi hyvä tavaton näitä suomi24 moderoijia, täysiä pölvästejä, ei mitään järkeä niitten tekemisissä.

      • Anonyymi

        Pitäisivät nyt hitto mistä tahansa säännöstä kiinni, ainakin kaksi vuorokautta, eihän tästä tule mitään että joka viestille luodaan omat säännöt. Tämä sivuston rassaaja kuubaan täältä sotkemasta. Kyllä ärsyttää tämä mielivaltainen ylläpito johon on pakko alistua, pistäkää ihmeessä joku vastaava sivusto pystyy, että täältä pääsee pois.


      • Anonyymi kirjoitti:

        Pitäisivät nyt hitto mistä tahansa säännöstä kiinni, ainakin kaksi vuorokautta, eihän tästä tule mitään että joka viestille luodaan omat säännöt. Tämä sivuston rassaaja kuubaan täältä sotkemasta. Kyllä ärsyttää tämä mielivaltainen ylläpito johon on pakko alistua, pistäkää ihmeessä joku vastaava sivusto pystyy, että täältä pääsee pois.

        Jaa, ihmettelinkin kun seikkaperäinen selitykseni koodeineen katosi kuin tuhka tuuleen!


      • Anonyymi
        0sm0 kirjoitti:

        Jaa, ihmettelinkin kun seikkaperäinen selitykseni koodeineen katosi kuin tuhka tuuleen!

        Arvaa montako minulta on viety, samalla tavalla, joskus saa olla, ja sitten taas ei. Ja juuri näissä, johon on aikaa tuhlannut eniten tuo tarpeeton poistaminen eniten vituttaa.

        Muuten nytkin harmitti kun palasin tähän ketjuun vain kopioidakseni sen testi sivulle aikeenani testata toimiiko, ja sitten huomasin että eihän sitä ole. Vaikutti hyvältä kohteelta opiskella JavaScript alkeita.


    • Anonyymi

      Jokaisen pitäisi nostaa "älämölön" näistä turhista poistoista, niin muutkin tulisi tietoiseksi ettei vaan kannata tuhlata aikaa oikeisiin ohjeisiin. Jos tästä uskaltaa vetää johtopäätöksiä niin avaus saa nykyään sisältää JavaScript kysymyksen ja kysymykseen liittyvän JavaScript koodin, mutta vastaus ei.

    • Anonyymi

      Jos tämmöinen on sääntöjen vastaista, niin ne säännöt pitäisi asettaa käyttäjien nähtäväksi.

    • Koodit voi laittaa esim JS-Fiddleen. Siellä on helppo testaillakin.

      Minä tein tällaisen: https://jsfiddle.net/v39u42Lt/
      Muokkasin vähän tuota HTML:ääkin (radioihin sama name-attribuutti, niin ovat samaa ryhmää (niin ilmeisesti halutaan) ja br:t väliin, niin radiot ei hypähtele, kun toinen valitaan ja teksti tulee väliin).

      Refaktoroin tekstin näyttämisen ja muiden piilottamisen funktioon showText(ind), jolle annetaan parametrinä se monesko inputti (ja span:ni) on kyseessä.

      • Anonyymi

        Sait sen näyttämään niiiiin vaikealta, että vaihdan kiinnostuksen kohdetta Pythoniin. Se 0sm0:n poistettu oli helpon näköinen juttu.


      • Anonyymi kirjoitti:

        Sait sen näyttämään niiiiin vaikealta, että vaihdan kiinnostuksen kohdetta Pythoniin. Se 0sm0:n poistettu oli helpon näköinen juttu.

        Olisko tämä helpomman näkönen: https://jsfiddle.net/xz5h2cr3/
        Mutta tässä tulee paljon toistoa. Varsinkin jos inputteja on vielä enemmän tai jopa niin ettet tiedä kuinka monta niitä tulee olemaan. Silloin silmukka on ainoa ratkaisu.

        Tuosta edellisestä ratkaisustani:
        - entries() on vähän niinkuin Pythonin enumerate, se antaa taulukosta (tai taulukkomaisesta objektista, jollainen document.querySelectorAll:n palaute on) samalla kertaa indeksin ja alkion.

        -ternääri-operaattori A?B:C vastaa rakennetta if (A) {B} else {C} ja se antaa sen arvon, kumpi suoritettiin A vai B.
        Eli
        (i===ind)?'inline-block':'none'
        on 'inline-block', jos i on yhtä kuin ind ja muuten se on 'none'.

        Kokeile vielä itse toteuttaa silmukkaratkaisu. Älä anna periksi!


      • Anonyymi
        minkkilaukku kirjoitti:

        Olisko tämä helpomman näkönen: https://jsfiddle.net/xz5h2cr3/
        Mutta tässä tulee paljon toistoa. Varsinkin jos inputteja on vielä enemmän tai jopa niin ettet tiedä kuinka monta niitä tulee olemaan. Silloin silmukka on ainoa ratkaisu.

        Tuosta edellisestä ratkaisustani:
        - entries() on vähän niinkuin Pythonin enumerate, se antaa taulukosta (tai taulukkomaisesta objektista, jollainen document.querySelectorAll:n palaute on) samalla kertaa indeksin ja alkion.

        -ternääri-operaattori A?B:C vastaa rakennetta if (A) {B} else {C} ja se antaa sen arvon, kumpi suoritettiin A vai B.
        Eli
        (i===ind)?'inline-block':'none'
        on 'inline-block', jos i on yhtä kuin ind ja muuten se on 'none'.

        Kokeile vielä itse toteuttaa silmukkaratkaisu. Älä anna periksi!

        No nyt se on jo ymmärrettävissä täysin, ja jotain tuotahan se turhaan poistettu 0sm0:n koodikin oli. Kopioin siitä huolimatta omalle sivulle, vaikka tuo testaaminen tuollakin onnistui.


    Ketjusta on poistettu 1 sääntöjenvastaista viestiä.

    Luetuimmat keskustelut

    1. Päivän Sanna: Nvidia sijoittaa miljardi dollaria Nokian osakkeisiin

      Nvidia merkitsee osakkeet 6,01 Yhdysvaltain dollarin osakekohtaisella merkintähinnalla tavanomaisten toteutumisehtojen t
      Maailman menoa
      49
      5344
    2. Palkansaajilta kupattiin 27,5 mrd euroa työeläkkeisiin

      Jo pelkän himmelin toimintakulut olivat 400 miljoonaa euroa, jolla olisi mukavasti tuottanut myös sote-palveluja hyvinvo
      Maailman menoa
      78
      3243
    3. Suomessa Pohjoismaiden tyhmimmät demarit......aijaijai..

      Lasse Lehtinen sanoo suoraan, että Ruotsissa on fiksummat demarit kuin Suomessa. Ja Tampereella fiksummat demut kuin Hel
      Maailman menoa
      24
      3097
    4. HS: persujen v. 2015 turvapaikanhakijoista alle puolet töissä

      Aikuisina Suomeen tulleista ja myönteisen päätöksen saaneista vain 42 prosenttia oli vuonna 2023 töissä, vaikka he ovat
      Maailman menoa
      143
      2931
    5. Lehtinen: "Oli demareidenkin onni, että valkoiset voittivat sodan 1918"

      Lasse Lehtisen mukaan vasemmalla on radiohiljaisuus hänen uutuuskirjastaan, "Läheltä piti. Kansakunnan hurjat hetket" L
      Maailman menoa
      39
      2217
    6. Nepotismi jytkyttää porvaristossa

      Taas uutisoidaan, että useampi perussuomalainen kansanedustaja on palkannut oman perheenjäsenensä eduskunta-avustajaksi
      Maailman menoa
      67
      1795
    7. Martina Aitolehti podcastissa: Ero

      Martina Aitolehti podcastissa: Ero Martina Aitolehti kertoi BFF-podcastin https://www.iltalehti.fi/viihdeuutiset/a/696
      Kotimaiset julkkisjuorut
      227
      1686
    8. Persut muuten hyväksyvät 2 + 8 mrd. euron maatalous- ja yritystuet

      Vaikka molemmat tukimuodot tiedetään haitallisiksi, koska ovat käytännössä pelkkää säilyttävää tukea, eivätkä kannusta k
      Maailman menoa
      91
      1620
    9. Kaikki ovat syntisiä!!!

      Näin täällä koko ajan vakuutellaan uskovaisten toimesta. Myös Päivi Räsänen on toistanut tätä samaa matraa jatkuvasti. N
      Luterilaisuus
      419
      1397
    10. Persut palkkaavat verorahoilla

      avustajikseen lapsiaan ja naisystäviään. Juuso on palkannut avustajakseen oman poikansa. Hänen koulutustaustastaan ei
      Maailman menoa
      265
      1376
    Aihe