Изменить цвет textarea с помощью Javascript

У меня есть простой скрипт, который не меняет цвет текста текстового поля. Пожалуйста, смотрите код ниже:Изменить цвет textarea с помощью Javascript

<input type="Radio" name="text" onClick="black();">B<br/> 
<input type="Radio" name="text" onClick="white();">W 
<textarea id="text" placeholder="Explanation (Optional)"></textarea> 
<script> 
    function black() { 
     document.getElementById("text").style.color="#000000"; 
    } 
     function white() { 
     document.getElementById("text").style.color="#ffffff"; 
    } 
</script>

источник

2016-05-06 Anton Koenig

Вы должны поставить JavaScript в script тегов.

См. Ниже рабочую демонстрационную версию.

<input type="Radio" name="text" onClick="black();">B<br/> 
 
<input type="Radio" name="text" onClick="white();">W 
 
<textarea id="text" placeholder="Explanation (Optional)"></textarea> 
 

 
<script> 
 

 
function black() { 
 
    document.getElementById("text").style.color="#000000"; 
 
} 
 
    function white() { 
 
    document.getElementById("text").style.color="#ffffff"; 
 
} 
 

 
</script>

Для того, чтобы избежать ввода JavaScript в script тегов вы можете добавить вас яваскрипта к .js файла и ссылки это в HTML, как этот <script src="example.js"></script>

источник

2016-05-06 01:21:46

это работает для вас, но не для меня. Может ли какой-нибудь эффект css-стилизации? –

@AntonKoenig, если вы запустите его здесь, при переполнении стека, это не сработает для вас? работает во всех браузерах для меня –

<script> 
    function black() { 
     document.getElementById("text").style.color="#000000"; 
    } 

    function white() { 
     document.getElementById("text").style.color="#ffffff"; 
    } 
</script>

источник

2016-05-06 01:13:57 Felix

Вы забыли открытия {для белой функции

ли это как этот

function black() { 
    document.getElementById("text").style.color="#000000"; 
} 
    function white() { 
    document.getElementById("text").style.color="#ffffff"; 
}

источник

2016-05-06 01:15:37 jakob

сожалеем об этом. Это была просто ошибка форматирования, которая не была в моем реальном коде, просто в вопросе. Это не проблема solvemy –

@AntonKoenig вам также нужно поставить javascript между '

Таким образом, для записи, если я вставляю именно код, который я вижу в вашем вопросе в файл и сохранить его как test.html или что-то, а затем открыть его в браузере он работает. Код я вижу в момент бытия:

<input type="Radio" name="text" onClick="black();">B<br/> 
<input type="Radio" name="text" onClick="white();">W 
<textarea id="text" placeholder="Explanation (Optional)"></textarea> 
<script> 
    function black() { 
     document.getElementById("text").style.color="#000000"; 
    } 
     function white() { 
     document.getElementById("text").style.color="#ffffff"; 
    } 
</script>

Так я представляю себе, что в вашем реальном коде эти функции декларации на самом деле в closure. В этом случае функции будут неопределенными в области, которую обработчики событий будут вызывать. Например, следующее будет вызывать неопределенные ошибки в консоли при нажатии переключателей, потому что white и black не входят в сферу действия.

<input type="Radio" name="text" onClick="black();">B<br/> 
<input type="Radio" name="text" onClick="white();">W 
<textarea id="text" placeholder="Explanation (Optional)"></textarea> 
<script> 
(function() { 
    function black() { 
     document.getElementById("text").style.color="#000000"; 
    } 
    function white() { 
     document.getElementById("text").style.color="#ffffff"; 
    } 
})() 
</script>

Вы можете убедиться, что функции доступны для использования в обработчиках, объявив глобальную переменную на window и присвоения значения для соответствующей функции. Например:

<input type="Radio" name="text" onClick="black();">B<br/> 
<input type="Radio" name="text" onClick="white();">W 
<textarea id="text" placeholder="Explanation (Optional)"></textarea> 
<script> 
(function() { 
    window.black = function() { 
     document.getElementById("text").style.color="#000000"; 
    } 
    window.white = function() { 
     document.getElementById("text").style.color="#ffffff"; 
    } 
})() 
</script>

Это было бы явным образом обеспечить ваши функции доступны в глобальном масштабе, но вы можете просто удалить window. от перед именами переменных.

Кроме того, поймите, что если вы должны были объявить эти переменные как var black = function() { ... из-за закрытия, тогда вы сразу вернетесь туда, где вы начали с того, что функции, выходящие из области действия для обработчиков кликов.

И, наконец, все это вообще очень уродливо. Присвоение переменных на глобальном уровне window обычно является плохой идеей, особенно с такими родовыми именами, как white и black. Они могут легко конфликтовать с другой переменной в вашем коде.Следующим был бы лучший способ сделать что-то вроде этой ИМО.

<input type="Radio" name="text" id="black-radio">B<br/> 
<input type="Radio" name="text" id="white-radio">W 
<textarea id="text" placeholder="Explanation (Optional)"></textarea> 
<script> 
(function() { 
    var black = function() { 
     document.getElementById("text").style.color="#000000"; 
    } 
    var white = function() { 
     document.getElementById("text").style.color="#ffffff"; 
    } 
    document.getElementById('black-radio').addEventListener('click', black); 
    document.getElementById('white-radio').addEventListener('click', white); 
})() 
</script>

источник

2016-05-06 02:15:40

Я думаю, вы пытаетесь изменить цвет фона, не так ли?

Попробуйте изменить style.color к style.background:

function black() { 
    document.getElementById("text").style.background = "black"; 
} 
function white() { 
    document.getElementById("text").style.background = "white"; 
}

источник

2016-05-06 03:34:49

Смежные вопросы