Javascript Button Replace Text

[MaLLaH95]

Hallo,

ich habe eine Frage, wie kann man unendlich viele <span> einfügen, damit es funktioniert?
Zurzeit kann man das nur auf einer anwenden und die andere beiden bleiben bei localhost...

<input type="button" value="localhost" class="pText" onclick="changeText('localhost');"/>

<input type="button" value="jeder" class="pText" onclick="changeText('%');"/>

<span id="pText">localhost</span>
<span id="pText">localhost</span>
<span id="pText">localhost</span>

Javascript

PHP Code:

function changeText(text) {
document.getElementById('pText').innerHTML=text;
} 


[ShinoTV]

Originally Posted by MaLLaH95

Hallo,

ich habe eine Frage, wie kann man unendlich viele <span> einfügen, damit es funktioniert?
Zurzeit kann man das nur auf einer anwenden und die andere beiden bleiben bei localhost...

<input type="button" value="localhost" class="pText" onclick="changeText('localhost');"/>

<input type="button" value="jeder" class="pText" onclick="changeText('%');"/>

<span id="pText">localhost</span>
<span id="pText">localhost</span>
<span id="pText">localhost</span>

Javascript

PHP Code:

function changeText(text) {
document.getElementById('pText').innerHTML=text;
} 


"id" zeigt immer nur auf ein objekt.
Ersetze es durch "class"


-------------
EDIT:
Du kannst auch einem Objekt sowohl eine id als auch eine class zuweisen.
Schau hier mal rein

[MaLLaH95]

<span class="pText">localhost</span>
<span class="pText">localhost</span>
<span class="pText">localhost</span>

function changeText(text) {
document.getElementByClass('pText').innerHTML=text ;
}

funktioniert nicht

[lnqlorlouz]

Du musst dir alle Elemente holen. Mit document.getElementById bekommst du immer nur das erste gefundene Element mit der Id. Und dann musst du ganz klassisch einfach nur durch iterieren.

Eine Id sollte eigentlich immer eindeutig sein.

function changeText(text) {
    var spans = document.querySelectorAll("#pText");
    for (var i = 0; i < spans.length; i++) {
        spans[i].innerHTML = text;
    }
}

oder

function changeText(text) {
    var spans = document.getElementsByClassName("pText");
    for (var i = 0; i < spans.length; i++) {
        spans[i].innerHTML = text;
    }
} 

oder moderner ES6-JavaScript-Code

const changeText = (text) => {
    const spans = document.querySelectorAll("#pText");
    spans.forEach((el) => el.innerHTML = text);
}

[MaLLaH95]

Originally Posted by lnqlorlouz

Du musst dir alle Elemente holen. Mit document.getElementById bekommst du immer nur das erste gefundene Element mit der Id. Und dann musst du ganz klassisch einfach nur durch iterieren.

Eine Id sollte eigentlich immer eindeutig sein.

function changeText(text) {
    var spans = document.querySelectorAll("#pText");
    for (var i = 0; i < spans.length; i++) {
        spans[i].innerHTML = text;
    }
}

oder

function changeText(text) {
    var spans = document.getElementsByClassName("pText");
    for (var i = 0; i < spans.length; i++) {
        spans[i].innerHTML = text;
    }
} 

oder moderner ES6-JavaScript-Code

const changeText = (text) => {
    const spans = document.querySelectorAll("#pText");
    spans.forEach((el) => el.innerHTML = text);
}

Dankeschön <3

Und wie macht man das mit einer Option?

<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>

[lnqlorlouz]

Originally Posted by MaLLaH95

Dankeschön <3

Und wie macht man das mit einer Option?

<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>

Was genau möchtest du machen?

[MaLLaH95]

<select>
<option class="pText" value="volvo">Volvo</option>
<option class="pText" value="saab">Saab</option>
<option class="pText" value="opel">Opel</option>
<option class="pText" value="audi">Audi</option>
</select>

<span class="pText">localhost</span>
<span class="pText">localhost</span>
<span class="pText">localhost</span>

Genau das gleiche nur mit Option halt

[lnqlorlouz]

Originally Posted by MaLLaH95

<select>
<option class="pText" value="volvo">Volvo</option>
<option class="pText" value="saab">Saab</option>
<option class="pText" value="opel">Opel</option>
<option class="pText" value="audi">Audi</option>
</select>

<span class="pText">localhost</span>
<span class="pText">localhost</span>
<span class="pText">localhost</span>

Genau das gleiche nur mit Option halt

HTML:

<select id="carSelect">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<span class="pText">localhost</span>
<span class="pText">localhost</span>
<span class="pText">localhost</span>

JavaScript:

var carSelect = document.getElementById("carSelect");
carSelect.addEventListener("change", function() {
	changeText(this);
});

function changeText(text) {
var selected = text.value;
 var spans = document.querySelectorAll(".pText");
    for (var i = 0; i < spans.length; i++) {
        spans[i].innerHTML = selected;
    }
}

[FrictionF0]

How about using jQuery? That can make things easier for you.

[kangar00]

Originally Posted by FrictionF0

How about using jQuery? That can make things easier for you.

There is not a need for using a framework for easy things like that.

He should not start to work with frameworks until he mastered vanilla javascript.