基于选择将类添加到textarea（jquery到javascript）答案

【问题标题】：Adding class to textarea based on select (jquery to javascript)基于选择将类添加到textarea（jquery到javascript）
【发布时间】：2017-01-12 19:21:59
【问题描述】：

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

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

jQuery Fiddle

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

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

Broken Fiddle

我错过了什么？

【问题讨论】：

标签： javascript jquery html css textarea

【解决方案1】：

您应该使用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>

【讨论】：

每个人的 cmets 都非常有帮助，并教会了我一些有关标准 JS 的知识，但这个示例在我的情况下效果最好。谢谢！

【解决方案2】：

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

您还缺少 vanilla javascript 的更改事件处理程序。

所以

document.getElementsByClassName('.addon-select')

应该是

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

 OR

document.querySelector('.addon-select')

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

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

Check Fiddle

【讨论】：

【解决方案3】：

您错过了将event handler 附加到select。我还在select 中添加了id。如果你想使用类，你必须像这样访问它

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>

【讨论】：