Hallo,
ich habe eine Seite mit mehreren Buttons. Außerdem soll eine Infobox angezeigt werden, wenn auf einen bestimmten Link geklickt wird. Sowohl für die Buttons als auch für die Infobox habe ich ein Javascript, das am Ende der Seite eingebunden ist. Leider funktionieren nur die Buttons oder die Infobox, je nachdem, welcher Javascript-Code zuerst steht. Hier der Code:
Buttons:
Code
<button id="hinzufuegenbutton" class="button" value="Hinzufügen">Zur Liste hinzufügen</button>
Code
<button id="entfernenbutton" type="button" class="entfernenbutton" value="'.$i.'">Entfernen</button>
Link:
Infobox:
Code
<div id="eanmodal" class="modal">
<div class="modal_inhalt">
<div class="modalheader">
<span id="eanmodalschliessen" class="closemodal">×</span>
</div>
<p class="modaltext">Text</p>
</div>
</div>
Infobox CSS:
Code
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modalheader {
height: 50px;
background-color: RGB(0, 0, 130);
}
.modal_inhalt {
background-color: #fefefe;
margin: 15% auto;
padding: 0;
border: 1px solid #888;
width: 80%;
}
.modaltext {
padding: 20px;
}
.closemodal {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
padding: 10px;
}
.closemodal:hover, .closemodal:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
Alles anzeigen
Javascript:
Code
//"Hinzufügen"-Button
document.querySelector('#hinzufuegenbutton').onclick = function() {
if(document.querySelector('.filmelement') !== null) {
$('#liste').load('listeneueneintraghinzufuegen.php', {
hinzufuegenButtonGedrueckt: true
});
}
}
//"Entfernen"-Button
$(document).on('click', '.entfernenbutton', function() {
$('#liste').load('elementauslisteentfernen.php', {
nummerElement: $(this).val()
});
});
//Infobox "EAN"
var eanmodal = document.querySelector("#eanmodal");
document.querySelector("#eanlink").onclick = function() {
eanmodal.style.display = "block";
}
document.querySelector("#eanmodalschliessen").onclick = function() {
eanmodal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == eanmodal) {
eanmodal.style.display = "none";
}
}
Alles anzeigen
Wie bekomme ich Buttons und die Infobox zum Laufen?