Textarea颜色，bordercolor不会改变
[英]Textarea color,bordercolor won't change
问题描述
I wanted the Input and Textarea to turn red through javascript when the values are empty, it worked for the input but not for the textarea. 
我希望Input和Textarea在值为空时通过javascript变为红色，它适用于输入，但不适用于textarea。 Can someone help? 有人可以帮忙吗？
$(document).on("click", '.btn-info.mailContact', function () { values = { Onderwerp: $('.Subject').val(), Text: $('.TheMessage').value, }; if ($('.Subject').val() != "" && $('.TheMessage').val() != "") { State.sendContactMail(values); window.location.href = '/confirmation'; } else { Onderwerp.style.color = Onderwerp.value === "" ? "#f00" : "#0f0"; Onderwerp.style.borderColor = Onderwerp.value === "" ? "#f00" : "#0f0"; Text.style.color = Text.value === "" ? "#f00" : "#0f0"; Text.style.borderColor = Text.value === "" ? "#f00" : "#0f0"; } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" class="form-control Subject" id="Onderwerp" placeholder="Vul je onderwerp hier in"/> <textarea class="form-control TheMessage" id="Text" wrap="soft" placeholder="Vul je bericht hier in"></textarea> <a id="btn-mailContact" class="btn btn-info mailContact">Verstuur contactformulier</a>
3 个解决方案
解决方案1
0 2017-08-29 10:40:18
You are depending on an element with an ID getting a matching global variable . 您将依赖于ID获得匹配的全局变量的元素 。
This is a terrible idea because it makes code very confusing and hard to maintain. 这是一个糟糕的主意，因为它使代码非常混乱且难以维护。 The variables seem to appear out of nowhere. 变量似乎无处不在。
One of the problems (with using globals in general) is that other code might define a global with the same name. 问题之一（通常使用全局变量）是其他代码可能用相同的名称定义全局变量。
In this case the global Text variable already has a value defined by the browser. 在这种情况下，全局Text变量已经具有浏览器定义的值 。
Don't use globals like that. 不要使用这样的全局变量。 You're already using jQuery, so create a jQuery object using an ID selector. 您已经在使用jQuery，因此请使用ID选择器创建jQuery对象。
While you're at it: Don't repeat yourself. 在执行此操作时：不要重复自己。
Something along the lines of this should do the trick: 遵循以下方法应该可以解决问题：
var element_ids = ['Onderwerp', 'Text'];
elements_ids.forEach(function (id) {
var $element = $("#" + id);
var color = $element.val === "" ? "#f00" : "#0f0";
$element.css({ color: color, borderColor: color });
});
解决方案2
0 已采纳 2017-08-29 10:45:29
不需要像这样使用变量使用id和类
$.('.TheMessage').css("color","#fff").css("border-color","#0f0"); //Use jquery like this
解决方案3
0 2017-08-29 11:25:02
Please check this solution. 请检查此解决方案。 Hope this will helpful for you. 希望这对您有所帮助。
I have tried to solve by using your own code. 我试图通过使用您自己的代码来解决。 Thanks. 谢谢。
$(document).ready(function(){ $(".mailContact").click(function () { values = { Onderwerp: $('.Subject').val(), Text: $('.TheMessage').value, }; if ($('.Subject').val() != "" && $('.TheMessage').val() != "") { State.sendContactMail(values); window.location.href = '/confirmation'; } else { Onderwerp.style.color = Onderwerp.value === "" ? "#f00" : "#0f0"; Onderwerp.style.borderColor = Onderwerp.value === "" ? "#f00" : "#0f0"; document.getElementById("Text").style.color = document.getElementById("Text").value === "" ? "#f00" : "#0f0"; document.getElementById("Text").style.borderColor = document.getElementById("Text").value === "" ? "#f00" : "#0f0"; } }) });
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> </head> <body> <input type="text" class="form-control Subject" id="Onderwerp" placeholder="Vul je onderwerp hier in"/> <textarea class="form-control TheMessage" id="Text" wrap="soft" placeholder="Vul je bericht hier in"></textarea> <a id="btn-mailContact" class="btn btn-info mailContact">Verstuur contactformulier</a> <input type="button" class="mailContact" value="send" /> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.