Register for your free account! | Forgot your password?

Go Back   elitepvpers > Coders Den > Web Development
You last visited: Today at 23:11

  • Please register to post and access all features, it's quick, easy and FREE!


Javascript Button Replace Text

Discussion on Javascript Button Replace Text within the Web Development forum part of the Coders Den category.

Reply
 
Old   #1
 
elite*gold: 0
Join Date: Dec 2014
Posts: 82
Received Thanks: 15
Javascript Button Replace Text

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;




MaLLaH95 is offline  
Old 08/13/2019, 11:50   #2
 
elite*gold: 96
Join Date: Jul 2016
Posts: 43
Received Thanks: 20
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


ShinoTV is offline  
Old 08/13/2019, 12:04   #3
 
elite*gold: 0
Join Date: Dec 2014
Posts: 82
Received Thanks: 15
<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
MaLLaH95 is offline  
Old 08/13/2019, 12:19   #4
 
elite*gold: 0
Join Date: Jun 2013
Posts: 385
Received Thanks: 72
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);
}


lnqlorlouz is offline  
Thanks
2 Users
Old 08/13/2019, 12:57   #5
 
elite*gold: 0
Join Date: Dec 2014
Posts: 82
Received Thanks: 15
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>
MaLLaH95 is offline  
Old 08/13/2019, 13:05   #6
 
elite*gold: 0
Join Date: Jun 2013
Posts: 385
Received Thanks: 72
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?
lnqlorlouz is offline  
Old 08/13/2019, 13:08   #7
 
elite*gold: 0
Join Date: Dec 2014
Posts: 82
Received Thanks: 15
<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
MaLLaH95 is offline  
Old 08/13/2019, 13:14   #8
 
elite*gold: 0
Join Date: Jun 2013
Posts: 385
Received Thanks: 72
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;
    }
}


lnqlorlouz is offline  
Thanks
1 User
Reply



« Zahlungsmittel + Lieferando | [MYSQL] Probleme mit Datenbank. »

Similar Threads
[B] Push Button [S] 10 e*gold/Button; 25 e*g/psd+Button
09/20/2013 - elite*gold Trading - 4 Replies
Moin, Hier könnt ihr folgenden Push Button kaufen: http://i.epvpimg.com/YlrYe.jpg Pro Button wären das 10e*g, pro Button mit .psd dazu 25e*g. Wenn ihr einen Button kaufen wollt, schreibt mir eine PN, damit ich den Namen ändern kann, alles hochladen kann und euch dann per Treasure schicken kann. ;) Schrift kann auch geändert werden. Dazu einfach in der PN schreiben, welche Schrift ihr haben wollt^^
[Release]Text replace
07/31/2013 - Metin2 PServer Guides & Strategies - 9 Replies
Hey, da es mir bei manchen Sachen dann doch zuviel ist alles per Hand in die pack file zu schreiben wenn ich z.b. die zone.epk packen moechte mit neuen Sachen, hab ich mir ein kleines Programm geschrieben was noch in seiner Anfangsphase ist. Es tut das was es soll momentan. Es gibt bestimmt auch ein Packer der das selbst macht. :D Beispiel: bei meinem packer sieht das ganze immer so aus wenn ich neue Sachen eingefuegt habe und dann packen moechte: d:/ymir...
[GM/Javascript] str.replace funktioniert nur einmal
11/09/2011 - Web Development - 0 Replies
Ja hab n kleines Problem (wahrscheinlich wie das letzte mal ein absolut dummes http://www.skypesmiley.com/images/emoticon/emotico n-0105-wink.gif) und zwar: txtarea.addEventListener('keypress', function(e){ this.innerHTML = this.innerHTML.replace(/a/gi, 'test'); }, true);Nach Tastendruck werden alle "a"s mit dem String "test" ersetzt, wenn ich jetzt jedoch in meiner textarea noch n paar "a"s eingebe, werden diese nicht mit dem String "test" ersetzt, warum nicht?!? Das ganze ist n...



All times are GMT +2. The time now is 23:11.


Powered by vBulletin®
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
SEO by vBSEO ©2011, Crawlability, Inc.

BTC: 33E6kMtxYa7dApCFzrS3Jb7U3NrVvo8nsK
ETH: 0xc6ec801B7563A4376751F33b0573308aDa611E05

Support | Contact Us | FAQ | Advertising | Privacy Policy | Terms of Service | Abuse
Copyright ©2019 elitepvpers All Rights Reserved.