Ändere die Farbe von Textarea mit Javascript

Ich habe ein einfaches Skript, das die Textfarbe des Textfelds nicht ändert. Bitte beachten Sie den Code unten:Ändere die Farbe von Textarea mit Javascript

<input type="Radio" name="text" onClick="black();">B<br/> 
<input type="Radio" name="text" onClick="white();">W 
<textarea id="text" placeholder="Explanation (Optional)"></textarea> 
<script> 
    function black() { 
     document.getElementById("text").style.color="#000000"; 
    } 
     function white() { 
     document.getElementById("text").style.color="#ffffff"; 
    } 
</script>

Quelle

2016-05-06 Anton Koenig

Sie benötigen Javascript in script-Tags zu setzen.

Siehe unten für funktionierende Demo.

<input type="Radio" name="text" onClick="black();">B<br/> 
 
<input type="Radio" name="text" onClick="white();">W 
 
<textarea id="text" placeholder="Explanation (Optional)"></textarea> 
 

 
<script> 
 

 
function black() { 
 
    document.getElementById("text").style.color="#000000"; 
 
} 
 
    function white() { 
 
    document.getElementById("text").style.color="#ffffff"; 
 
} 
 

 
</script>

Um zu vermeiden, innerhalb script Tags setzen Javascript Sie Javascript in eine .js Datei und Referenz dies in den HTML-Code wie dieser <script src="example.js"></script>

Quelle

2016-05-06 01:21:46

das funktioniert für Sie, aber nicht für mich. Könnte ein CSS-Styling das bewirken? –

@AntonKoenig Wenn Sie es hier auf Stack Overflow ausführen, funktioniert es nicht für Sie? funktioniert bei allen Browsern für mich –

<script> 
    function black() { 
     document.getElementById("text").style.color="#000000"; 
    } 

    function white() { 
     document.getElementById("text").style.color="#ffffff"; 
    } 
</script>

Quelle

2016-05-06 01:13:57 Felix

Sie vergessen haben, öffnen {für weiße Funktion

Machen Sie es wie dieser

function black() { 
    document.getElementById("text").style.color="#000000"; 
} 
    function white() { 
    document.getElementById("text").style.color="#ffffff"; 
}

Quelle

2016-05-06 01:15:37 jakob

leid. Das war nur ein Formatierungsfehler, der nicht in meinem echten Code war, nur in der Frage. Es löst nicht mein Problem –

@AntonKoenig Sie müssen auch das Javascript zwischen '

Also für die Aufzeichnung, wenn ich genau fügen Sie den Code ich in Ihrer Frage in eine Datei zu sehen und es als test.html oder etwas sparen, es dann in einem Browser öffnen funktioniert. Der Code, den ich im Moment Wesen bin zu sehen:

<input type="Radio" name="text" onClick="black();">B<br/> 
<input type="Radio" name="text" onClick="white();">W 
<textarea id="text" placeholder="Explanation (Optional)"></textarea> 
<script> 
    function black() { 
     document.getElementById("text").style.color="#000000"; 
    } 
     function white() { 
     document.getElementById("text").style.color="#ffffff"; 
    } 
</script>

So stelle ich mir vor, dass in Ihrem realen Code diese Funktionsdeklarationen sind tatsächlich innerhalb eines closure. In diesem Fall wären die Funktionen in dem Bereich, in dem die Event-Handler sie aufrufen würden, undefiniert. Zum Beispiel würde das Folgende undefinierte Fehler in der Konsole auslösen, wenn Sie auf die Optionsschaltflächen klicken, da white und black außerhalb des Geltungsbereichs sind.

<input type="Radio" name="text" onClick="black();">B<br/> 
<input type="Radio" name="text" onClick="white();">W 
<textarea id="text" placeholder="Explanation (Optional)"></textarea> 
<script> 
(function() { 
    function black() { 
     document.getElementById("text").style.color="#000000"; 
    } 
    function white() { 
     document.getElementById("text").style.color="#ffffff"; 
    } 
})() 
</script>

können Sie sicherstellen, dass die Funktionen in den Handler Nutzung zur Verfügung stehen, indem Sie eine globale Variable auf window deklarieren und den Wert auf die entsprechende Funktion zugewiesen wird. Zum Beispiel:

<input type="Radio" name="text" onClick="black();">B<br/> 
<input type="Radio" name="text" onClick="white();">W 
<textarea id="text" placeholder="Explanation (Optional)"></textarea> 
<script> 
(function() { 
    window.black = function() { 
     document.getElementById("text").style.color="#000000"; 
    } 
    window.white = function() { 
     document.getElementById("text").style.color="#ffffff"; 
    } 
})() 
</script>

Dies wäre die explizite Möglichkeit, sicherzustellen, Ihre Funktionen im globalen Bereich zur Verfügung stehen, aber man könnte auch einfach die window. von vor den Variablennamen entfernen.

Verstehen Sie auch, wenn Sie diese Variablen wie var black = function() { ... aus der Schließung deklarieren würden, dann würden Sie wieder da sein, wo Sie mit den Funktionen außerhalb des Bereichs für die Click-Handler gestartet haben.

Und schließlich ist das alles im Allgemeinen sehr hässlich. Das Zuweisen von Variablen auf der globalen Ebene window ist normalerweise eine schlechte Idee, insbesondere mit solchen generischen Namen wie white und black. Sie könnten leicht mit einer anderen Variablen in Ihrem Code in Konflikt geraten.Das Folgende wäre ein besserer Weg, etwas wie diese IMO zu machen.

<input type="Radio" name="text" id="black-radio">B<br/> 
<input type="Radio" name="text" id="white-radio">W 
<textarea id="text" placeholder="Explanation (Optional)"></textarea> 
<script> 
(function() { 
    var black = function() { 
     document.getElementById("text").style.color="#000000"; 
    } 
    var white = function() { 
     document.getElementById("text").style.color="#ffffff"; 
    } 
    document.getElementById('black-radio').addEventListener('click', black); 
    document.getElementById('white-radio').addEventListener('click', white); 
})() 
</script>

Quelle

2016-05-06 02:15:40

Ich denke, Sie versuchen, die Hintergrundfarbe zu ändern, nicht wahr?

Versuchen die style.color-style.background zu ändern:

function black() { 
    document.getElementById("text").style.background = "black"; 
} 
function white() { 
    document.getElementById("text").style.background = "white"; 
}

Quelle

2016-05-06 03:34:49

Ändere die Farbe von Textarea mit Javascript

Antwort

Verwandte Themen