Question

我正在尝试使用以下代码来更改ID为“text”的div元素的HTML

HTML code：

<ul> 
      <li value="1" onclick="changeText(this.value);">about</li>
      <li value="2" onclick="changeText(this.value);">reg</li>
      <li value="3" onclick="changeText(this.value);">home</li>
</ul>

JS：

function changeText(value){  
  var text=document.getElementById("text");     
  if(value==1)text.innerHTML("You clicked on about!");
  if(value==2)text.innerHTML("You clicked on reg!");
  if(vaule==3)text.innerHTML("You clicked on home!");      
 //alignDiv();  
}

但是，实际上，它不会更改Div元素的HTML。任何帮助表示赞赏。谢谢！

Answer 1

问题

如果您正在查看控制台中的错误消息，那么它非常有帮助：

未捕获的TypeError：对象＃<HTMLDivElement>的属性'innerHTML' 不是一个功能

在开发过程中，您应始终使用控制台（让它成为Chrome控制台，Firebug，Opera Dragonfly，IE开发者工具），这是一个非常有价值的工具。

解决方案

innerHTML是属性，而不是方法，所以你应该这样设置：

text.innerHTML = "You clicked on about!";

Working jsFiddle Demo

Answer 2

您的代码存在一些问题。

=＆GT; .innerHTML(错了。你这样做：text.innerHTML = "whatever"
<li>没有值属性，因此仅仅赋予它该属性并不是那么好。（虽然它有效）

使用新的html5 element.dataset和data-属性将是一个很好的解决方案。

您的代码如下所示：

<script>
 function changeText(item){//item is an li
    var text = document.getElementById("text");  
    //we check the dataset for the value attribute
    console.log(item.dataset.value);
    if(item.dataset.value === "1")
    { 
      text.innerHTML = "You clicked on about!";
    }
    else if(item.dataset.value === "2")
    { 
      text.innerHTML = "You clicked on reg!";
    } else if (item.dataset.value === "3")
    { 
      text.innerHTML = "You clicked on home!";
    }
}
</script>
<div id="text" > Content here </div>
<ul> <!--we send the li element into the changeText function -->
      <li data-value="1" onclick="changeText(this);">about</li>
      <li data-value="2" onclick="changeText(this);">reg</li>
      <li data-value="3" onclick="changeText(this);">home</li>
</ul>

观看现场演示： http://jsfiddle.net/BJBaP/1/

使用JS来响应列表项事件

2 个答案:

问题

解决方案