Question

我在这个例子中看到如何用输入按钮更改id内容，它可以正常工作：

示例：

<script type="text/javascript">
function changeText(){
    document.getElementById('boldStuff').innerHTML = 'Fred Flinstone';
}
</script>
<p>Welcome to the site <b id='boldStuff'>dude</b> </p> 
<input type='button' onclick='changeText()' value='Change Text'/>

当我尝试使用此更新选择或复选框时，它不起作用？使用表单元素可以用什么来实现这个结果？

非工作示例：

<script type="text/javascript">
function changeText(){
    document.getElementById('boldStuff').innerHTML = '2';
}
</script>
<p>Welcome to the site 
<input type="checkbox" id="boldStuff" value="1" /></p> 
<input type='button' onclick='changeText()' value='Change'/>

Answer 1

innerHTML更改开始标记和结束标记之间的HTML。由于输入标记是一个自我结束标记（标记以/>结尾，即使它在HTML5中有效，只留下/，也没有innerHTML。

如果要更改值，只需定位value属性：

document.getElementById('boldStuff').value = '2';

Answer 2

您应该设置元素checked，而不是innerHtml。设置innerHtml等同于：

<input type="checkbox" id="boldStuff" value="1">2</input>

这是无效的HTML。

如果要将复选框设置为选中，请执行以下操作：

document.getElementById('boldStuff').checked = true;

Answer 3

如果要设置值，设置值（而不是innerHTML）：

document.getElementById('boldStuff').value = '2';

大多数属性都可以通过这种方式找到，有些属性必须来自element.getAttribute并设置为element.setAttribute。

Answer 4

要通过innerHTML进行更改，首先需要更改innerHTML值

所以

document.getElementById('***').innerHTML="2";

相应的HTML需要看起来类似于：

<p id="***">some text</p>

以javascript形式使用innerHTML

4 个答案: