Javascript Button Replace Text

08/13/2019 11:41 MaLLaH95#1
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...

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

<input type="button" value="jeder" class="pText" onclick="changeText('%');"/>
HTML Code:
<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;
} 
08/13/2019 11:50 ShinoTV#2
Quote:
Originally Posted by MaLLaH95 View Post
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...

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

<input type="button" value="jeder" class="pText" onclick="changeText('%');"/>
HTML Code:
<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
[Only registered and activated users can see links. Click Here To Register...]
08/13/2019 12:04 MaLLaH95#3
<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
08/13/2019 12:19 lnqlorlouz#4
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.
HTML Code:
function changeText(text) {
    var spans = document.querySelectorAll("#pText");
    for (var i = 0; i < spans.length; i++) {
        spans[i].innerHTML = text;
    }
}
oder
HTML Code:
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
HTML Code:
const changeText = (text) => {
    const spans = document.querySelectorAll("#pText");
    spans.forEach((el) => el.innerHTML = text);
}
08/13/2019 12:57 MaLLaH95#5
Quote:
Originally Posted by lnqlorlouz View Post
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.
HTML Code:
function changeText(text) {
    var spans = document.querySelectorAll("#pText");
    for (var i = 0; i < spans.length; i++) {
        spans[i].innerHTML = text;
    }
}
oder
HTML Code:
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
HTML 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>
08/13/2019 13:05 lnqlorlouz#6
Quote:
Originally Posted by MaLLaH95 View Post
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?
08/13/2019 13:08 MaLLaH95#7
<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
08/13/2019 13:14 lnqlorlouz#8
Quote:
Originally Posted by MaLLaH95 View Post
<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:
HTML Code:
<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:
HTML Code:
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;
    }
}
09/08/2019 20:17 FrictionF0#9
How about using jQuery? That can make things easier for you.
09/11/2019 18:29 kangar00#10
Quote:
Originally Posted by FrictionF0 View Post
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.