kann man 2 bilder per Button tauschen wenn ja wie **?
Hallöle, ich hab da mal eine frage und zwar würde ich gerne das sich per ''onclick'' Button 2 Bilder tauschen also Bild 1 soll auf den platz von Bild 2 und Bild 2 auf Bild platz 1 versteht ihr? ich verstehe nicht ganz wie
<body>
<div class="bar">
<img src="img/menü.png" alt="" />
Währungsrechner
</div>
<div class="input-container">
<img class="flag" src="img/eu.png" alt="" />
<input value="" id="euroField" type="text" />
<span class="currency">EUR</span>
</div>
<div class="center-container">
<img src="img/pfeile.png" alt="" />
</div>
<div class="input-container">
<img class="flag" src="img/usa.png" alt="" />
<input value="" id="usdField" type="text" />
<span class="currency">USD</span>
</div>
<div class="center-container">
<button onclick="calc()">$ Berechnen</button>
<button onclick="euro()">€ Berechnen</button>
</div>
<script src="script.js"></script>
</body>
3 Antworten
Hi Maurice,
verwende lieber Eventlistener innerhalb von JavaScript anstatt onclick-EventHandler. Diese bieten mehr Möglichkeiten und es können mehrere EventListener mit dem gleichen Event registriert werden. Setze deinen JavaScript-Code in den Head-Element von HTML. Das ist semantischer und logischer. Mithilfe von dem DOMContentLoaded-Event kannst du abfragen ob alle DOM-Elemente geladen wurden. Wenn du externe Skripte einbindest kannst auch ersatzweise das defer-Attribut verwenden.
Ich habe zwei Versionen geschrieben da ich davon ausgehe das du nicht nur die Bilder austauschen möchtest, sondern auch die funktionellen Elemente im Elternelement.
Hier die einfache Variante wo nur das Bild gewechselt wird:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#tauschen {
cursor: pointer;
}
</style>
<script>
"use strict";
let calcEuro, calcDollar, tauschen;
document.addEventListener("DOMContentLoaded", init);
function init() {
calcEuro = document.querySelector("#calcEuro");
calcDollar = document.querySelector("#calcDollar");
tauschen = document.querySelector("#tauschen");
tauschen.addEventListener("click", tausche);
}
function tausche() {
let flags = document.querySelectorAll(".flag");
flags.forEach((item)=>{
if(item.src.includes('eu.png')) {
item.src = "img/usa.png";
} else {
item.src = "img/eu.png";
}
});
}
</script>
</head>
<body>
<div class="bar">
<img src="img/menü.png" alt="">
Währungsrechner
</div>
<div class="input-container">
<img class="flag" src="img/eu.png" alt="">
<input value="" id="euroField" type="text">
<span class="currency">EUR</span>
</div>
<div class="center-container">
<img src="img/pfeile.png" alt="" id="tauschen">
</div>
<div class="input-container">
<img class="flag" src="img/usa.png" alt="">
<input value="" id="usdField" type="text">
<span class="currency">USD</span>
</div>
<div class="center-container">
<button id="calcEuro">$ Berechnen</button>
<button id="calcDollar">€ Berechnen</button>
</div>
</body>
</html>
Hier die andere Variante:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tauschen</title>
<script>
'use strict';
let inputContainerList, tausch;
document.addEventListener("DOMContentLoaded", init);
function init() {
tausch = document.querySelector("#tauschen");
tausch.addEventListener("click", tauschen);
}
function tauschen() {
inputContainerList = document.querySelectorAll(".input-container");
let container1 = inputContainerList[0];
let container2 = inputContainerList[1];
let clonedContainer1 = container1.cloneNode(true);
let clonedContainer2 = container2.cloneNode(true);
container1.parentNode.replaceChild(clonedContainer2, container1);
container2.parentNode.replaceChild(clonedContainer1, container2);
}
</script>
</head>
<body>
<div class="bar">
<img src="img/menü.png" alt="">
<span>Währungsrechner</span>
</div>
<div class="input-container">
<img class="flag" src="img/eu.png" alt="">
<input value="" id="euroField" type="text">
<span class="currency">EUR</span>
</div>
<div class="center-container">
<img src="img/pfeile.png" alt="" id="tauschen">
</div>
<div class="input-container">
<img class="flag" src="img/usa.png" alt="">
<input value="" id="usdField" type="text">
<span class="currency">USD</span>
</div>
<div class="center-container">
<button id="calcEuro">$ Berechnen</button>
<button id="calcDollar">€ Berechnen</button>
</div>
</body>
</html>
Es gäbe noch eine dritte Variante wo man nur ein Button hat zum berechnen, aber das geht in diesem Post zu weit - daher nur die beiden Varianten.
Viel Erfolg Maurice
Du kannst z.B. die src-Attribute tauschen in der onclick-Methode.
Du könntest beide img's mit einer id versehen und im event handler beide src's abrufen und jeweils dem anderen Element zuweisen.
Im JavaScript code deklarierst du die methode die dort als event handler fungieren soll. Nennen wir diese mal Click.
function Click(){
let img1 = document.getElementById('img1');
let src1 = img1.src;
let img2 = document.getElementById('img2');
let src2 = img2.src;
img1.src = src2;
img2.src = src1;
}
Hier habe ich den beiden bildern die id's img1 und img2 gegeben. Kann sein das vllt. im code etwas nicht richtig geschrieben ist, da ich grad keine auto vervolständigubg hab.
Und ich erste dann einfach in der HTML Datei den neuen Button ... Richtig ? 😬😅
<Button id="click">Revers</button>
So meinte ich das, also ich möchte halt mit einen vorhanden Button der schon eine Funktion hat ( währung umrechnen) das sobald ich darauf drücke das sich damit auch automatisch die 2 Bilder sich tauschen. Wenn du verstehst 😅
Damit der button die funktion ausruft musst du onclick="Click()" screiben. Die id's müssen hier nur die Bilder haben.
Kann ich da nicht einfach die vorhandene "flag" class nehmen ?
Könntest du mir eventuell ein Beispiel geben ? 😬😅
Kann man auch machen, allerdings kann es ja mehrere elemente mit derselben class geben. Daher nimmt man für die element auswahl in in der Regelb die id.
Aber kann man 2x die selbe ID verwenden ?
Also der Button muss onclick beinhalten und das IMG eine id ?
Nein die Bilder bekommen verschiedene id's. Probier es mal mit img1 und img2. Der code müsste mit den beiden gehen.
Und das funktioniert nochmal wie? 😅 Bin gerade seid 1. Woche in dem Thema programmieren drin. Ich wüsste tatsächlich jetzt nicht wirklich wie ich da anfangen sollte 😅