通过函数改变文本颜色

我一直试图通过一个输入并扔进一个函数来改变文本颜色，但我不知道我在哪里出错了。我使用了参考代码并更改了一两个值，所以我认为我搞砸了一些东西。下面是我遇到麻烦的代码:

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

这真的让我很困扰。我还需要改变页面背景颜色，但因为它是在相同的方式，我可以只是学习基于这段代码。有人能帮我一下吗?

尝试将您的函数置于函数调用之上，并在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>

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

希望你得到了答案

这将解决你:

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

相关内容

最新更新

热门标签：