javascript - 类内的值没有改变

Question

我想改变类内部的值，但它没有改变这是我的代码//html

<menu class="box">a</menu><menu class="box">b</menu><menu class="box">c</menu><menu class="box">d</menu>

//javascript

<script type="text/javascript">

var box = document.getElementsByClassName('box');
var after = ['html', 'css', 'js' , 'jquery']

for (i = 0; i < box.length; i++) {
  box[i].value = after[i];

}

Answer 1

要更改类名，请使用

var boxes = document.getElementsByClassName('box');
var after = ['html', 'css', 'js' , 'jquery']

for (i = 0; i < box.length; i++) {
  boxes[i].className = after[i];
}

来自MDN Docs

哪个会给你

<menu class="html">a</menu><menu class="css">b</menu>
<menu class="js">c</menu><menu class="jquery">d</menu>

要更改每个元素的实际值，您可以使用 innerHtml

var boxes = document.getElementsByClassName('box');
var after = ['html', 'css', 'js' , 'jquery']

for (i = 0; i < box.length; i++) {
  boxes[i].innerHTML = after[i];
}

哪个会给你

<menu class="box">html</menu><menu class="box">css</menu>
<menu class="box">js</menu><menu class="box">jquery</menu>