通过函数更改文本颜色答案

【问题标题】：Changing text color via function通过函数更改文本颜色
【发布时间】：2014-03-14 02:49:27
【问题描述】：

我一直在尝试通过输入并投入函数的文本颜色来更改文本颜色，但我不知道我哪里出错了。我使用了参考代码并更改了一个或两个值，所以我认为我搞砸了。这是我遇到问题的代码：

<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>

这真的让我很困扰。我还需要更改页面背景颜色，但因为它的方式相同，所以我可以根据这段代码来学习。谁能帮帮我？

【问题讨论】：

…用color代替backgroundColor?

标签： javascript html button input colors

【解决方案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>

【讨论】：

【解决方案2】：

我不知道 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>

希望你得到答案..

【讨论】：

【解决方案3】：

这会解决你的问题：

<?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>

【讨论】：