Изменение цвета текста через функцию

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 ?
Теги:
button
input
colors

3 ответа

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

Это исправит вас:

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

Надеюсь, ты получил ответ.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню