Hilfe bei der Programmierung, Antworten auf Fragen / Javascript / Auch wenn die Schaltfläche nicht angeklickt wurde, sind die h1-Tags gelb [doppelt] - Javascript, HTML, Javascript-Ereignisse

Selbst wenn der Button nicht angeklickt wurde, sind die h1-Tags gelb [duplizieren] - Javascript, HTML, Javascript-Ereignisse

Noch bevor ich auf die Schaltfläche klicke, wird das mit h1 gekennzeichnete Element gelb. Was kann ich tun, um es zu beheben? Ich möchte sie nur gelb machen, wenn ich auf die Schaltfläche klicke.

<html>

<head>
<title></title>
</head>
<body>

<h1>Hello </h1>

<h2>World</h2>

<h1>test</h1>


<button id="button">click</button>
<script>
var x = document.getElementById("button");

x.addEventListener("onclick",change());

function change(){
var myNodes = document.getElementsByTagName("h1");

for (var i = 0; i < myNodes.length ; i++) {
myNodes[i].style.backgroundColor  = "yellow";
}
}

</script>

</body>
</html>

Antworten:

0 für die Antwort № 1

Zwei Probleme in Ihrem js Schnipsel zuerst in x.addEventListener("onclick",change());

Die Veranstaltung sollte sein click statt onclick zweitens change() ruft sofort die Funktion auf, aber x.addEventListener("click",change) löst die Funktion nur aus, wenn darauf geklickt wird

var x = document.getElementById("button");

x.addEventListener("click", change);

function change() {
var myNodes = document.getElementsByTagName("h1");

for (var i = 0; i < myNodes.length; i++) {
myNodes[i].style.backgroundColor = "yellow";
}
}

<h1>Hello </h1>

<h2>World</h2>

<h1>test</h1>


<button id="button">click</button>

0 für die Antwort № 2

weil die Funktion addEventListner Funktionsänderungen akzeptiert, nicht change ()

<script>
var x = document.getElementById("button");

x.addEventListener("click",change);

function change(){
var myNodes = document.getElementsByTagName("h1");
for (var i = 0; i < myNodes.length ; i++) {
myNodes[i].style.backgroundColor  = "yellow";
}
}

</script>