2017-02-02 7 views
1

Also ich versuche, die Schriftfarbe meiner gesamten Seite zu ändern, wenn ich auf einen Radiobutton klicken, etwa so:Javascript ändern Schriftfarbe Onclick

<input type="radio" name="textcol" value="#FOF8FF" onclick = "changeText('#FOF8FF');"> Alice Blue<br> 

die dann diese Funktion aufruft:

function changeText(col) 
    { 
     console.log(col); 
     console.log(document.getElementsByName('boyo')); 
     var abc = document.getElementsByName('boyo'); 
     for(var i = 0, length = abc.length; i < length; i++) 
     { 
      abc[i].style.color = col; 
     } 

} 

und du bist nur so bewusst, in allen meinen h3 und p-Tags (nur Text in meinem Dokument), ich gebe ihnen einen Namen "boyo", wie folgt aus:

<h3 name = "boyo">My favorite food</h3> 

Aber aus irgendeinem Grund tut es nichts. Ich weiß, dass es die richtigen Elemente hat (ich drucke sie auf der Konsole aus, wie Sie sehen können), und keine Fehler auftreten, aber meine Schriftfarbe ändert sich nicht. Was zur Hölle mache ich falsch?

BEARBEITEN: Wenn ich den Wert von nur der Zeichenfolge "# 80FF08" mit dem Wert, den ich passiere (was ausgedruckt wird, ist genau das gleiche), gibt es FALSE, dass sie gleich sind - wie könnte das sein? Wenn ich die Farbe manuell einstelle, funktioniert es.

+0

Sie sehr, sehr kleine Änderung im Code tun müssen, sehen diese http://stackoverflow.com/questions/41995384/javascript-change-font-color-onclick/41995582#41995582 – vijay

+0

Ist Es gibt einen Grund, warum Sie nicht einfach eine CSS-Klasse auf das höchste HTML-Element setzen können, das definiert, welche 'color: ...' -Eigenschaft in Kraft ist. Warum sollte das Attribut "Stil" jedes einzelnen Elements geändert werden? –

Antwort

1

Ändern Sie die Farbe auf andere Farbe richtig funktioniert, wie #FOF8FF scheint kein gültiger HEX-Wert:

function changeText(color) { 
 
    console.log(color); 
 
    console.log(document.getElementsByName('boyo')); 
 
    var abc = document.getElementsByName('boyo'); 
 
    for (var i = 0, length = abc.length; i < length; i++) { 
 
    abc[i].style.color = color; 
 
    } 
 

 
}
<input type="radio" name="textcol" value="#FOF8FF" onclick="changeText('#33ccff');">Alice Blue 
 
<br> 
 
<h3 name="boyo">My favorite food</h3>

1

Sein, weil # FOF8FF nicht vorhanden ist, versuchen # 000 oder jede Verwendung andere Farbe anstelle von # FOF8FF.

Wenn Sie mehr darüber klar sein und überprüfen Sie Ihr Element und versuchen Sie, Farbe zu geben: # FOF8FF, Es will arbeiten entweder. Zu Ihrer Information füge ich Screenshot von diesem an.

enter image description here

2

Ihr Code würde gut funktionieren, wenn Sie die O bis 0 in Ihrer Farbe Code # FOF8FF

function changeText(col) { 
 
    console.log(col); 
 
    console.log(document.getElementsByName('boyo')); 
 
    var abc = document.getElementsByName('boyo'); 
 
    for (var i = 0, length = abc.length; i < length; i++) { 
 
    abc[i].style.color = col; 
 
    } 
 

 

 
}
<input type="radio" name="textcol" value="#FOF8FF" onclick='changeText("#F0F8FF")'>Alice Blue 
 
<br> 
 

 
<h3 id="colorMe" name="boyo">My favorite food</h3>

0

#FOF8FF nicht existiert O-0 Änderung ändern und ich fügte anderen Farbcode hinzu und es funktioniert gut

function changeText(col) 
 
    { 
 
     console.log(col); 
 
     console.log(document.getElementsByName('boyo')[0]); 
 
     var abc = document.getElementsByName('boyo')[0].style.color = col; 
 
     
 
     
 

 
}
<h3 name = "boyo">My favorite food</h3> 
 
     <input type="radio" name="textcol" value="#d2d2d2" onclick = "changeText('#d2d2d2');"> Alice Blue<br>

Verwandte Themen