Welk HTML-element (naam) is aangeklikt?

Status
Niet open voor verdere reacties.

JohanDerks

Verenigingslid
Lid geworden
2 dec 2006
Berichten
82
Ik probeer de naam van een radioknop van mijn programma, die ik zelf indruk, te "vangen", om hem voor een alert te gebruiken.
Voor dit soort event-problemen schijnt jQuery bijzonder geschikt te zijn, maar voor dit eenmalige probleem zou ik graag een "zuivere" javascript-oplossing hebben of een kant-en-klaar antwoord in jQuery. (Tot nu toe heb ik nooit jQuery hoeven te gebruiken.)
Daartoe heb ik een jsFiddle-programmaatje gevonden, waarmee ik experimenteer, tot nu toe zonder succes. Ik heb nu
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Created on: 22-4-2018 -->
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title></title>
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <meta name="author" content="Unregistered User" />
  <meta name="generator" content="AceHTML Freeware" />
<script type="text/javascript">
forms("detecting").bazinga.click(function(event) {
alert(event.target.name);
});
</script>
</head>
<body>

<form name="detecting" action="" method="post">
<input value="I have also hooked 'click' event" name="bazinga">
</form>
</body>
</html>
Ik verwacht een pop-up-venster met de naam 'bazinga', maar dat verschijnt niet.
Hoe moet ik dit programmaatje, met of zonder jQuery, wijzigen om dat alert te krijgen?
 
Laatst bewerkt:
Het voorbeeld wat je geeft is vrij oud, daar heb ik html5 van gemaakt. In de javascript heb ik .onclick gebruikt maar je kan ook naar de syntax van .addEventListener kijken, die heeft meer mogelijkheden.
Code:
<!doctype html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>Radio input</title>
</head>
<body>

<form id="myform">
  <label><input type="radio" name="mycolor" value="paars" checked> Paars</label><br>
  <label><input type="radio" name="mycolor" value="groen"> Groen</label><br>
  <label><input type="radio" name="mycolor" value="blauw"> Blauw</label>
</form>

<script>
var radioButtons = document.getElementsByName("mycolor");
for (var i=0; radioButtons[i]; i++) {
  radioButtons[i].onclick = function() {
    alert(this.value);
    //en wat je verder nog wilt doen...
  }
}
</script>

</body>
</html>

Als je specifieker binnen dit ene formulier wilt selecteren:
Code:
var radioButtons = document.getElementById("myform").elements["mycolor"];

Omdat je het over "een radioknop" hebt heb ik in het voorbeeld type="radio" gebruikt.

Belangrijk is dat class="", name="" en <tag> meerdere keren op 1 pagina mogen voorkomen. Wil je één specifiek element aanwijzen dan is id="" handiger omdat die altijd uniek moet zijn binnen een pagina.

Suc6. Have fun.
 
Laatst bewerkt:
Dan ook nog even de (lekker korte) jQuery versie
Code:
<!-- Eenmalig jQuery library laden -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
$("#myform input[name=mycolor]").click(function() {
  alert($(this).val());
});
</script>
In Jip en Janneke:
$("SELECTIE").click(FUNCTIE);
FUNCTIE is een naamloze function() {...}
$(this) is het element uit SELECTIE waarop is geklikt.

Noot: de SELECTIE mogelijkheden in jQuery zijn uitgebreider dan die in CSS3.
 
Laatst bewerkt:
Enorm bedankt. Dit is het begin, want ik ben niet geïnteresseerd in de value, maar in de naam van de radiogroep. Ik heb een serie radiogroepen:
Krijg ik dan het onderstaande:
Code:
<!doctype html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>Radio input</title>
</head>
<body>

<form id="myform">
  <label><input type="radio" name="mycolor" value="paars" checked> Paars</label><br>
  <label><input type="radio" name="mycolor" value="groen"> Groen</label><br>
  <label><input type="radio" name="mycolor" value="blauw"> Blauw</label>
  <label><input type="radio" name="myhobby" value="Nederlands" checked> Nederlands</label><br>
  <label><input type="radio" name="myhobby" value="Engels"> Engels</label><br>
  <label><input type="radio" name="myhobby" value="Esperanto"> Esperanto</label>
  <label><input type="radio" name="mydrink" value="koffie" checked> koffie</label><br>
  <label><input type="radio" name="mydrink" value="thee"> thee</label><br>
  <label><input type="radio" name="mydrink" value="bier"> bier</label>
</form>

<script>
var array[];
for (var j=0; array[j]; j++) {
for (var i=0; array[j][i]; i++) {
  array[j][i].onclick = function() {
    alert(this.name);
    //en wat je verder nog wilt doen...
  }
}
</script>
waarbij het er om gaat de naam van de laatst geselecteerde radiogroep te detecteren?
 
Laatst bewerkt:
Laatst bewerkt:
Met 1 for loop kan je onclick event-handlers toevoegen aan alle inputs met type="radio".
Code:
<form id="myform">
  <label><input type="radio" name="mycolor" value="paars" checked> Paars</label><br>
  <label><input type="radio" name="mycolor" value="groen"> Groen</label><br>
  <label><input type="radio" name="mycolor" value="blauw"> Blauw</label><br>
  <label><input type="radio" name="myhobby" value="Nederlands" checked> Nederlands</label><br>
  <label><input type="radio" name="myhobby" value="Engels"> Engels</label><br>
  <label><input type="radio" name="myhobby" value="Esperanto"> Esperanto</label><br>
  <label><input type="radio" name="mydrink" value="koffie" checked> koffie</label><br>
  <label><input type="radio" name="mydrink" value="thee"> thee</label><br>
  <label><input type="radio" name="mydrink" value="bier"> bier</label><br>
</form>

<div id="test" style="padding:4px 0"></div>

<script>
function showValue(variable, showInId) {
  document.getElementById(showInId).innerHTML = JSON.stringify(variable, null, 4);
}
var radioArray = ["paars", "Nederlands", "koffie"];
showValue(radioArray, "test")
var formInputs = document.getElementById("myform").elements;
for (var i=0; formInputs[i]; i++) {
  if (formInputs[i].getAttribute("type") == "radio") {
    formInputs[i].onclick = function() {
      switch (this.name) {
        case "mycolor": radioArray[0] = this.value; break;
        case "myhobby": radioArray[1] = this.value; break;
        case "mydrink": radioArray[2] = this.value; break;
      }
      showValue(radioArray, "test")
    }
  }
}
</script>

* array toegevoegd om waardes te bewaren.
* functie showValue toegevoegd om makkelijk een array uit te lezen.
 
Laatst bewerkt:
Ik voel me behoorlijk stom (zonder ervaring met innerHTML, JSON enz.), en ik kom niet verder dan

Code:
<script>
/* function showValue(variable, showInId) {
  document.getElementById(showInId).innerHTML = JSON.stringify(variable, null, 4); "/
}
function showValue(radionaam) {
var formInputs = document.getElementById("myform").elements;
for (var i=0; formInputs[i]; i++) {
  if (formInputs[i].getAttribute("type") == "radio") {
    formInputs[i].onclick = function() {
      radionaam[0] = this.name; break;
      alert(radionaam[0]);
    }
  };
}; 
}
</script>
<form id="myform">
  <label><input type="radio" name="mycolor" value="paars"> Paars</label><br>
  <label><input type="radio" name="mycolor" value="groen"> Groen</label><br>
  <label><input type="radio" name="mycolor" value="blauw"> Blauw</label><br>
  <label><input type="radio" name="myhobby" value="Nederlands" checked> Nederlands</label><br>
  <label><input type="radio" name="myhobby" value="Engels"> Engels</label><br>
  <label><input type="radio" name="myhobby" value="Esperanto"> Esperanto</label><br>
  <label><input type="radio" name="mydrink" value="koffie"> koffie</label><br>
  <label><input type="radio" name="mydrink" value="thee"> thee</label><br>
  <label><input type="radio" name="mydrink" value="bier"> bier</label><br>
</form>

<button type="input" onclick="showValue(radionaam)">Laat zien</button>
<div id="test" style="padding:4px 0"></div>
</body>
</html>
in een poging om je voorbeeld aan te passen aan mijn wens de naam van de aangeklikte radiogroep te detecteren.
Maar er gebeurt niets.
 
Laatst bewerkt:
Twee functies showValue()?
Dan kan nooit kloppen ;-)
 
Sorry, dat kan natuurlijk niet.
Ik heb het probleem - dat er op neerkwam, dat ik de user wilde informeren, dat hij/zij op een verkeerde radiogroep reageert - op een heel directe manier opgelost: zet in de opgeroepen functie de GLOBALE variabele, die de naam van de eerder aangeklikte button heeft en vergelijk die met de naam van de "verkeerde" radiogroep. Stemmen die niet overeen, dan volgt een alert.
Dus ik heb geen jQuery of iets anders voor mij onbekends nodig. Overigens zijn de antwoorden wel nuttig, voor een volgende keer, om aan te wennen ................
 
Een beetje op de manier waarop je oorspronkelijk bent begonnen.
Het kan korter, namelijk door bij het klikken op de button alle radios uit te lezen. In dat geval vervallen de radio click event gedeeltes.
Code:
<form id="myform">
    <label><input type="radio" name="mycolor" value="paars"> Paars</label><br>
    <label><input type="radio" name="mycolor" value="groen"> Groen</label><br>
    <label><input type="radio" name="mycolor" value="blauw"> Blauw</label><br>
    <label><input type="radio" name="myhobby" value="Nederlands"> Nederlands</label><br>
    <label><input type="radio" name="myhobby" value="Engels"> Engels</label><br>
    <label><input type="radio" name="myhobby" value="Esperanto"> Esperanto</label><br>
    <label><input type="radio" name="mydrink" value="koffie"> koffie</label><br>
    <label><input type="radio" name="mydrink" value="thee"> thee</label><br>
    <label><input type="radio" name="mydrink" value="bier"> bier</label><br>
    <button type="button" name="mybutton">Laat zien</button>
</form>

<script>
// arrays for radio names & radio checked
var radioNames = ["mycolor", "myhobby", "mydrink"];
var radioCheck = [false, false, false];

// 'click' event handlers
var formElements = document.getElementById("myform").elements;
for (var i=0; formElements[i]; i++) {
    // radio 'click' event handler
    if (formElements[i].getAttribute("type") == "radio") {
        formElements[i].onclick = function() {
            radioIsClicked(radioCheck, this.name);
        };
    }
    // button 'click' event handler
    if (formElements[i].getAttribute("name") == "mybutton") {
        formElements[i].onclick = function() {
            buttonIsClicked(radioNames, radioCheck);
        };
    }
}

// radio is clicked
function radioIsClicked(radioCheck, checkedRadioName) {
    switch (checkedRadioName) {
    case "mycolor":
        radioCheck[0] = true;
        break;
    case "myhobby":
        radioCheck[1] = true;
        break;
    case "mydrink":
        radioCheck[2] = true;
        break;
    }
}

// button is clicked
function buttonIsClicked(radioNames, radioCheck) {
    // result of active radios
    for (var i = 0; i < radioNames.length; i++) {
        if (radioCheck[i] == true) {
            // console.log(radioNames[i]);
            alert(radioNames[i]);
        }
    }
    // reset array radioCheck & uncheck radios
    for (var i = 0; i < radioCheck.length; i++) {
        radioCheck[i] = false;
    }
    var formElements = document.getElementById("myform").querySelectorAll('input[type=radio]');
    for (var i = 0; i < formElements.length; i++) {
        formElements[i].checked = false;
    }
}
</script>
Nog kort wat dingetjes.

Hoe een <input> eruit ziet en wat de werking is wordt bepaald door type="..." . Je hebt <button type="input"> en die bestaat niet. Je kan kiezen uit submit, button, reset. Zoek hier (klik) wat de schrijfwijze is van een html element, met voorbeelden erbij.

Een <button> mag overal staan. Als deze een relatie heeft met een formulier dan is het gebruikelijk deze binnen de <form> te zetten.

Aan te bevelen om alle scripts ondereaan te zetten, vlak boven </body> om 3 redenen
. Alle html elementen zijn dan bekend en kunnen direct in Javascript worden gebruikt.
. Pagina wordt eerder getoond en dat vinden smartphone gebruikers fijn.
. In Javascript mag je functies die onderaan staan toch erboven al aanroepen.

Met het gedeelte ~ formInputs.onclick ~ kan je een "click" afvangen en een eigen functie uitvoerren. Het toekennen van een bepaalde event-handler bij een element doe je slechts 1x, niet elke keer als je op de button klikt.

Over die functie met innerHTML, JSON, enz hoef je je zeker niet stom te voelen hoor. Die functie heb ik van internet geplukt waarmee arrays en objects op scherm getoond kunnen worden. Bij het coderen doet F12 in je browser hetzelfde op de console tab. Gebruik in je Javascript code dan: console.log(VARIABELE);

Suc6. Have fun.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan