根据选择将类添加到textarea（jQuery到javascript）

Question

我有一个脚本，可以在select下拉列表中进行select时更改textarea的字体。 它是用jQuery编写的。

var selectedScheme = '';
$('.addon-select').change(function() {
  $('.addon-custom-textarea').removeClass(selectedScheme).addClass($(this).val());
  selectedScheme = $(this).val();
});

jQuery小提琴

我想使用常规JavaScript重写它。 到目前为止，这是我所拥有的，但是它不起作用。

if (document.getElementsByClassName('.addon-select').value == 'arial') {
     document.getElementsByClassName('.addon-custom-textarea').className += ' arial'
}

破碎的小提琴

我想念什么？

Answer 1

getElementsByClassName返回一个类似于object的数组。 因此，您将必须使用index来访问特定元素。

另外，您还有香草JavaScript缺少的更改事件处理程序。

所以

document.getElementsByClassName('.addon-select')

应该是

document.getElementsByClassName('addon-select')[0]

 OR

document.querySelector('.addon-select')

JS

document.querySelector('.addon-select').addEventListener('change', function() {
    var textArea = document.querySelector('.addon-custom-textarea');

    textArea.className = 'addon-custom-textarea ' + this.value;
});

检查小提琴

Answer 2

您错过了将event handler附加到select 。 我也将id添加到select 。 如果要使用类，则必须像

document.getElementsByClassName('addon-select')[0]

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

Answer 3

您应该使用document.getElementsByClassName('class-name')[0]来定位单个元素。

您可以使用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>