2017-03-02 4 views
-2

Ich versuche, die Hintergrundfarbe des Eingabetextes zu ändern, indem ich die r, g, b Werte in 3 Eingabefelder gebe, aber mein Code scheint nicht Arbeit. Hier ist ein Teil meines Codes ist:Ändere Texthintergrundfarbe durch Eingabe von R, G, B Werten

<script type="text/javascript"> 
 

 

 

 
function backgroundColor() 
 
{ 
 
var re = document.getElementById('Red').value; 
 
var gr = document.getElementById('Green').value; 
 
var bl = document.getElementById('Blue').value; 
 
document.getElementById("text1").style.backgroundColor = "rgb(re,gr,bl)"; 
 

 
} 
 

 
</script> 
 

 

 
<body> 
 
<button onclick="backgroundColor()">Background Color</button> 
 

 
<h3>Backgroundround Color: 
 
\t \t R:<input type="number" id="Red" min="0" max="255"> 
 
\t \t G:<input type="number" id="Green" min="0" max="255"> 
 
\t \t B:<input type="number" id="Blue" min="0" max="255"> 
 
</h3> 
 

 
</body>

+2

re aussehen sollte, gr, und bl werden als Strings interpretiert, nicht als Variablen. Sie wollen '" rgb ("+ re +", "+ gr +", "+ bl +") "; –

+0

Sie scheinen das Element mit der ID von text1 zu fehlen – derp

+0

Ich sehe kein Element mit' id = "text1" ' –

Antwort

2

Sie die varibales in einem String verschachtelt sind, so der Code wie

<body> 
 
<button onclick="backgroundColor()">Background Color</button> 
 

 
<h3>Backgroundround Color: 
 
\t \t R:<input type="number" id="Red" min="0" max="255"> 
 
\t \t G:<input type="number" id="Green" min="0" max="255"> 
 
\t \t B:<input type="number" id="Blue" min="0" max="255"> 
 
</h3> 
 

 
</body> 
 
    <script type="text/javascript"> 
 

 

 

 
function backgroundColor() 
 
{ 
 
var re = document.getElementById('Red').value; 
 
var gr = document.getElementById('Green').value; 
 
var bl = document.getElementById('Blue').value; 
 
document.getElementById("text1").style.backgroundColor = "rgb(" + re + "," + gr+","+ bl+ ")"; 
 

 
} 
 

 
</script>

+0

Wenn Sie ES2015 verwenden, können Sie' \ 'rgb ($ {re}, $ {gr}, $ {bl}) \' 'machen. –

Verwandte Themen