JavaScript Function in Radio-Button einbinden

Dsimon24 · 11. Oktober 2017

Hallo zusammen,

da ich noch immer ziemlich wenig Kenntnisse in JS habe,
dennoch gerade eine Sache umsetzen muss, bräuchte
ich einmal eure Unterstützung.

Ich habe ein paar Radio-Button auf meiner Seite.
Wenn ich auf einen Radio-Button klicke, möchte ich folgendes realisieren.

1) Radio-Button aktivieren, was ich durch den Klick schon mache
2) Eine JS-Funktion ausführen, dass der Hash in der URL geändert
wird und in der Seite auf die entsprechende Section gesprungen wird.

Wie kann ich Punkt 2 realisieren? Ich habe leider noch keinerlei Ideen dazu.

VG, David

Madman1209 · 11. Oktober 2017

Hi,

Code:

<input type="radio" onclick="alert('hello');"/>

Quelle

so in der Art? Die Funktion, die du aufrufst, kann natürlich alles machen, was du möchtest. "Hash in der URL ändern" musst du aber bitte erklären was du damit meinst. Ein Scrollen zu einem bestimmten Punkt auf der Seite ist aber kein Problem.

VG,
Mad

Dsimon24 · 11. Oktober 2017

Ja, das bringt mir schon was, das war das fehlende Stichwort - danke dir!

Jetzt rufe ich über diesen Weg eine Funktion auf, die auch funktioniert.
ABER: Wie kann ich jetzt folgendes realisieren?

Ich habe drei Radio-Button, klicke einen an und die Funktion wird aufgerufen.
Ist jedoch schon einer angeklickt und ich klicke einen anderen an, so soll die
Funktion nicht erneut aufgerufen werden, bzw. dann eine andere Funktion.

Ist dies möglich?

kling1 · 11. Oktober 2017

du kannst denn hash mit

Code:

location.hash = 'meinhash'

setzen

hier mal ein beispiel wie du das umsetzen kannst
https://codepen.io/anon/pen/eGKgrb

Madman1209 · 11. Oktober 2017

Hi,

wenn du ein Framework wie z.B. jQuery nutzt erledigt das alles für dich, Stichwort: "one"-Funktion.

Aber für so einen Fall kannst du natürlich auch z.B. so etwas machen:

Code:

<img src="images/add.png" onclick="add_cart(); this.onclick=null;">

Quelle

Tipp: selber suchen und sich durchwühlen, man kommt in der Regel gerade bei StackOverflow sehr schnell weiter.

Hilft dir das weiter?

VG,
Mad

Dsimon24 · 11. Oktober 2017

Bin ja auch selbst noch am suchen - finde nur nicht wirklich was weil ich auch nicht genau weiß, wie ich nach sowas suchen kann - aber bin schon dran

HTML:

<img src="images/add.png" onclick="add_cart(); this.onclick=null;">

Funktioniert erst, wenn alle drei Radio-Button (sind in einer Gruppe) angeklickt wurden - aber nicht wenn ich zuvor Radio-1 anklicke und dann auf Radio-2 überspringe.

Madman1209 · 11. Oktober 2017

Hi,

ah ok, du möchtest, dass alle Buttons in der Radio-Group nach einmaligem Klicken irgendeines Buttons nicht mehr anklickbar sind?

Dann (mit ein bisschen Eigenleistung und ohne Vorkauen):

- Funktion beim klick auf einen Button aufrufen
- gewünschtes Verhalten ausführen
- im Anschluss daran allen Buttons der Radio Group das "onclick" Ereignis "wegnehmen" oder ändern

VG,
Mad

kling1 · 11. Oktober 2017

ich hab das beispiel angepasst.. der radio wird nach einem klick auch noch disabled
https://codepen.io/anon/pen/eGKgrb

HTML:

<label>
  <input name="hash" type="radio" value="yolo">
  yolo
</label>
<label>
  <input name="hash" type="radio" value="swag">
  swag
</label>

<div id="yolo">
  yolo div
</div>

<div id="swag">
  swag div
</div>

<script>
document.querySelectorAll('input[name="hash"]')
  .forEach(item => item.addEventListener('click', event => {

  event.target.setAttribute('disabled', true)
  location.hash = event.target.value

}))
</script>

<style>
div {
  background: yellow;
  margin: 30px;
  height: 300px;
}
</style>

Dsimon24 · 11. Oktober 2017

Madman1209 schrieb:
- im Anschluss daran allen Buttons der Radio Group das "onclick" Ereignis "wegnehmen" oder ändern

Das würde ich dann ändern wollen. Kannst du mir dazu noch einen Tipp geben? Mache ich das in der
Funktion die zuvor über das onClick ausgeführt wird, oder an welcher Stelle setze ich dies um?

@kling1: Danke, das werde ich mir mal genauer anschauen!

Madman1209 · 11. Oktober 2017

Hi,

Mache ich das in der Funktion die zuvor über das onClick ausgeführt wird, oder an welcher Stelle setze ich dies um?

genau da würde ich es zum Beispiel machen. Erst das machen, was di Funktion eigentlich machen soll ("Hash ändern") und danach die "Aufräumarbeiten".

VG,
Mad

Dsimon24 · 11. Oktober 2017

Sollte ja dann so aussehen:

HTML:

<html>
  <head>
    <script>
      function Foo() {
          document.getElementsByClassName('a').onclick = function() { Boo(); };
      }

      function Boo() {
        alert("X");
      }
    </script>
  </head>
  
  <body>
    <div class="radio">
      <label><input type="radio" href="#" class="a" onclick="Foo()" name="optradio">Option 1</label>
    </div>
    <div class="radio">
      <label><input type="radio" href="#" class="a" onclick="Foo()" name="optradio">Option 2</label>
    </div>
    <div class="radio">
      <label><input type="radio" href="#" class="a" onclick="Foo()" name="optradio">Option 3</label>
    </div>
  </body>
</html>

Funktioniert aber nicht.

Klicke ich einen Button an, so wird Funktion Foo ausgeführt.
Klicke ich in dieser Gruppe dann einen weiteren Button an,
so sollte ja dann Funktion Boo ausgeführt werden, oder?

Was mache ich hier falsch?

Teisi · 13. Oktober 2017

getElementsByClassName liefert ein array zurück, über das du iterieren musst und dann jedem einzelnem element das event zuordnen musst:

https://jsfiddle.net/paeLram6/

Suche

JavaScript Function in Radio-Button einbinden

Dsimon24

Lieutenant

Madman1209

Fleet Admiral

Dsimon24

Lieutenant

kling1

Gast

Madman1209

Fleet Admiral

Dsimon24

Lieutenant

Madman1209

Fleet Admiral

kling1

Gast

Dsimon24

Lieutenant

Madman1209

Fleet Admiral

Dsimon24

Lieutenant

Teisi

Lt. Junior Grade

Ähnliche Themen