2014-03-14 151 views
0

我一直在試圖通過輸入並拋出函數來改變文本的顏色,但我不知道我出錯的地方。我已經使用了參考代碼,並且改變了一兩個值,所以我認爲我搞砸了。這裏是我遇到的代碼:通過函數更改文本顏色

<form> 
    <input id="newColor" type="text"> <button value="Text" onclick="changeText(tColor)">Text</button> 
</form> 
<br> 
<div id="divTag"> 
THIS TEXT HERE 
</div> 
<script> 
    function changeText(tColor) 
    { 
     document.getElementById("newColor").value = tColor.value; 
     document.getElementById("divTag").style.backgroundColor = tColor; 
    } 
</script> 

這真的讓我感到困擾。我也需要改變頁面的背景顏色,但因爲它的方式相同,所以我可以根據這段代碼學習。有人可以幫我嗎?

+0

......用'color',而不是'backgroundColor'? – Ryan

回答

1

嘗試把你的函數的函數調用上面和周圍tColor

換單引號試試這個,以及

<head> 
    <script type="application/javascript"> 
     function changeColor(x,y){ 
      var z = document.getElementById(y); 
      z.style.color = x; 
     } 
    </script> 
    </head> 
    <body> 
    <button id="button_1" onclick="changeColor('red','h1')">ChangeColor</button> 
    <span id="h1" style="color:blue;">Hello</span> 
    </body> 
0

我不知道tColor想法。但作爲一個例子,如果你想改變文字顏色爲紅色,那麼你應該做的如下。

<script> 
      function changeText(tColor) 
      { 
      document.getElementById("newColor").style.color = tColor; 
      document.getElementById("divTag").style.backgroundColor = tColor; 
      } 
     </script> 
    <form onsubmit="return false;"> 
     <input id="newColor" type="text"> <button value="Text" onclick="changeText('red')">Text</button> 
    </form> 
    <br> 
    <div id="divTag"> 
    THIS TEXT HERE 
    </div> 

JsFiddle 如果你想從「newColor」文本框的顏色,代碼應改變如下。

<script> 
     function changeText() 
     { 
     var sColor = document.getElementById('newColor').value; 
     document.getElementById("newColor").style.color = sColor; 
     document.getElementById("divTag").style.backgroundColor = sColor; 
     } 
    </script> 

希望你得到的答案..

0

這將解決您:

<?php 
    if(isset($_POST['color'])){ 
     if($_POST['color'] != ""){ 
      $color = $_POST['color']; // be sure and sanitize this 
      echo $color; 
      exit(); 
     } else { 
      echo "error"; 
      exit(); 
     } 
    } 
?> 
<html> 
<head> 
    <script type="application/javascript"> 
     function ajaxObj(meth, url) { 
      var x = new XMLHttpRequest(); 
      x.open(meth, url, true); 
      x.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
      return x; 
     } 
     function ajaxReturn(x){ 
      if(x.readyState == 4 && x.status == 200){ 
       return true; 
      } 
     } 
    </script> 
    <script type="application/javascript"> 
     function _(x) { 
      return document.getElementById(x); 
     } 
    </script> 
    <script type="application/javascript"> 
     function changeColor() { 
      var color = _("newColor").value; 
      if (color == ""){ 

      } else { 
       var ajax = ajaxObj("POST", "<?php echo $_SERVER['PHP_SELF'] ?>"); 
       ajax.onreadystatechange = function() { 
        if(ajaxReturn(ajax) == true) { 
         if(ajax.responseText == "error") { 

         } else { 
          var newColor = ajax.responseText; 
          var ele = _("divTag"); 
          ele.style.color = newColor; 
         } 
        } 
       } 
       ajax.send("color="+color); 
      } 
     } 
    </script> 
</head> 
<body> 
    <form onsubmit="return false;"> 
     <input id="newColor" type="text"> 
     <button value="Text" onclick="changeColor()">Change Color</button> 
    </form> 
    <br> 
    <div id="divTag">THIS TEXT HERE</div> 
</body> 
</html>