[英]Adding class to textarea based on select (jquery to javascript)
I have a script that changes the font of a textarea
when a selection is made in a select
dropdown. 我有一个脚本,可以在
select
下拉列表中进行select
时更改textarea
的字体。 It's written in jQuery. 它是用jQuery编写的。
var selectedScheme = '';
$('.addon-select').change(function() {
$('.addon-custom-textarea').removeClass(selectedScheme).addClass($(this).val());
selectedScheme = $(this).val();
});
I would like to re-write this using regular JavaScript. 我想使用常规JavaScript重写它。 This is what I have so far, but It does not work.
到目前为止,这是我所拥有的,但是它不起作用。
if (document.getElementsByClassName('.addon-select').value == 'arial') {
document.getElementsByClassName('.addon-custom-textarea').className += ' arial'
}
What am I missing? 我想念什么?
getElementsByClassName
returns an array like object. getElementsByClassName
返回一个类似于object的数组。 So you will have to use an index
to access a specific element. 因此,您将必须使用
index
来访问特定元素。
Also you have the change event handler missing for vanilla javascript. 另外,您还有香草JavaScript缺少的更改事件处理程序。
So 所以
document.getElementsByClassName('.addon-select')
is supposed to be 应该是
document.getElementsByClassName('addon-select')[0]
OR
document.querySelector('.addon-select')
JS JS
document.querySelector('.addon-select').addEventListener('change', function() {
var textArea = document.querySelector('.addon-custom-textarea');
textArea.className = 'addon-custom-textarea ' + this.value;
});
You missed to attach an event handler
to the select
. 您错过了将
event handler
附加到select
。 And also I added id
to the select
. 我也将
id
添加到select
。 If you want to use class, you must access to it like 如果要使用类,则必须像
document.getElementsByClassName('addon-select')[0]
because getElementsByClassName
will return you a array-like object
, and you need ti get the first item
from it. 因为
getElementsByClassName
将返回一个array-like object
,因此您需要从中获取first item
。
document.getElementById('selectFont').addEventListener("change", function(){ let text = document.querySelector('.addon-custom-textarea'); text.className = 'addon-custom-textarea ' + this.value; }, false);
input, select, textarea { padding: 10px 10px; width: 200px; } /* not important */ .arial { font-family: 'Arial'; } .times { font-family: 'Times New roman'; } .courier-new { font-family: 'Courier New'; } .verdana { font-family: 'Verdana'; }
<select id="selectFont" class="addon-select"> <option selected disabled>Select a font...</option> <option value="arial">Arial</option> <option value="times">Times New roman</option> <option value="courier-new">Courier New</option> <option value="verdana">Verdana</option> </select> <br /> <textarea class="addon-custom-textarea" rows="5">This is some text</textarea>
You should be using document.getElementsByClassName('class-name')[0]
to target a single element. 您应该使用
document.getElementsByClassName('class-name')[0]
来定位单个元素。
You can use classList
to add and remove classes in an event listener - see demo below and updated fiddle here
: 您可以使用
classList
在事件侦听器中 添加和删除类-请参阅下面的演示,并updated fiddle here
:
var selectedScheme; document.getElementsByClassName('addon-select')[0].addEventListener('change', function() { if (selectedScheme) document.getElementsByClassName('addon-custom-textarea')[0].classList.remove(selectedScheme); document.getElementsByClassName('addon-custom-textarea')[0].classList.add(this.value); selectedScheme = this.value; });
input, select, textarea { padding: 10px 10px; width: 200px; } /* not important */ .arial { font-family: 'Arial'; } .times { font-family: 'Times New roman'; } .courier-new { font-family: 'Courier New'; } .verdana { font-family: 'Verdana'; }
<select class="addon-select"> <option selected disabled>Select a font...</option> <option value="arial">Arial</option> <option value="times">Times New roman</option> <option value="courier-new">Courier New</option> <option value="verdana">Verdana</option> </select> <br /> <textarea class="addon-custom-textarea" rows="5">This is some text</textarea>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.