想知道为什么我document.getElementById("my_div").innerHTML在重新分配变量时无法更新DOM.例如:
<div id="my_div" onclick="clicky();">
Bye.
</div>
<script type="text/javascript" charset="utf-8">
function clicky() {
var myDivValue = document.getElementById("my_div").innerHTML;
myDivValue = "Hello";
console.log(myDivValue);
}
</script>
在日志中,我可以看到变量在我点击时重新分配,但my_div的innerHTML保持不变.为什么是这样？
经过几年的经验......
对于刚开始的人(就像我一样)并发现自己也在问同样的事情,有两个重要的概念需要理解:
var myDivValue = element.innerHTML会为innerHTML创建一个引用/地址,每次我为该引用分配一个新值时,我都可以更新内容,但这不是它的工作原理.element.innerHTML值的副本(这是空白的)并将值赋给myDivValue,然后在myDivValue = "Hello";,我正在分配一个新值myDivValue,所以当然它永远不会更新element.innerHTML.令人困惑的部分:当=在JS中使用赋值运算符()时,你不是要明确指定引用或值(var referenceName = reference_to_thingvs. var containerName = newValue),
正如许多人在答案中所说,正确的方法是将document.getElementById("my_div")元素分配给myDiv:
var myDiv = document.getElementById("my_div")
现在我有一个对被调用元素的引用myDiv,我可以随时更新innerHTML属性:
myDiv.innerHTML …在jQuery中,我有以下代码
$("li#credit").trigger('click');
此代码仅在具有id信用的li上触发click事件.
现在使用JavaScript执行此操作
document.querySelectorAll("li#credit").click();
我收到错误:
click()不是函数
我正在使用的页面有多个id为"credit"的元素,我只需要在<li>id为credit的情况下触发click事件.
我编写了一个php页面,它将mysql数据库中的信息整齐地显示在表格中.我想用onLoad事件处理程序隐藏空表行.
这是一个示例表,其代码隐藏了<td>没有内容的代码.但我只能让它使用不同的ID:
<script type="text/javascript">
function hideTd(id){
if(document.getElementById(id).textContent == ''){
document.getElementById(id).style.display = 'none';
}
}
</script>
</head>
<body onload="hideTd('1');hideTd('2');hideTd('3');">
<table border="1">
<tr>
<td id="1">not empty</td>
</tr>
<tr>
<td id="2"></td>
</tr>
<tr>
<td id="3"></td>
</tr>
</table>
</body>
我想要做的是使用一个类<td>来实现同样的事情,同时只引用一次类,而不是引用我想删除的每个id,这甚至不适用于我的动态内容.我尝试使用此代码:
<script type="text/javascript">
function hideTd(){
if(document.getElementsByClassName().textContent == ''){
document.getElementsByClassName().style.display = 'none';
}
}
</script>
</head>
<body onload="hideTd('1');">
<table border="1">
<tr>
<td class="1">not empty</td>
</tr>
<tr>
<td class="1"></td>
</tr>
<tr>
<td class="1"></td>
</tr>
</table>
</body>
但它不起作用.它应该隐藏<td>具有指定类的空s.我如何<td>使用类隐藏空s,而不是ID？
我正在使用Robert Nyman的脚本来获取文档中所有具有相同类的元素,但它不适用于onclick或任何其他事件:
var photo = document.getElementsByClassName("photo_class","img",document.getElementById("photo_wrap"));
photo.onclick = function(){alert("Finaly!");
也许你知道如何解决它？谢谢!
我无法弄清楚如何在JavaScript中使用多个ID.单个ID和getElementById没问题,但是只要我将ID更改为类并尝试使用getElementsByClassName,该函数就会停止工作.我读过有关该主题的100篇帖子; 仍然没有找到答案,所以我希望有人知道如何使getElementsByClassName工作.
以下是我用于测试的一些简单代码:
function change(){
document.getElementById('box_one').style.backgroundColor = "blue";
}
function change_boxes(){
document.getElementsByClassName ('boxes').style.backgroundColor = "green";
}
<input name="" type="button" onClick="change(document.getElementById('box_one')); change_boxes(document.getElementsByClassName('boxes'))" value="Click" />
<div id="box_one"></div>
<div class="boxes" ></div>
<div class="boxes" ></div>
首先,抱歉我的英语不好......
我写了一个函数来改变元素类来改变它们的属性.出于某种原因,只有一些元素发生了变化,我花了几个小时才找到解决方案,但他对我来说似乎很奇怪,也许你可以向我解释一下.
function replace(){
var elements = document.getElementsByClassName('classOne');
for (var i = 0; i < elements.length; i++) {
elements[i].className = 'classTwo';
}
}
不能正常工作,在这里演示,[在chrome 25和FF],所以我采用了循环系数:
function replace(){
var elements = document.getElementsByClassName('classOne');
for (var i = 0; i < elements.length; i) { // Here’s the difference
elements[i].className = 'classTwo';
}
}
这很好用!似乎被称为"推",并且不需要系数......这是正常的吗？它与我见过的例子不同.
提前致谢!
我只想将一个类名改为另一个.
我试过用了
document.getElementsByClassName("current").setAttribute("class", "none");
但它不起作用.我是javascript的新手.
我正在尝试使用
onmouseover="document.getElementsByClassName().style.background='color'"
将鼠标悬停在另一个页面元素上时,将具有给定类名的所有div的颜色更改为另一种颜色.
这是一个jsfiddle - 如果有人可以提供一些有用的指示,我会在哪里出错,那将是很好的,我确信这是一个非常明显的我缺少的东西.它与document.getElementById一起使用,但只改变了第一个div的颜色,而不是所有颜色.
谢谢 :)
我正在尝试制作一个简单的javascript程序,它不起作用.请帮助.在eclipse中,我创建了一个动态Web项目,在DD中,我的欢迎文件是index.jsp.下面是我的index.jsp代码
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Duncan'S</title>
<script type="text/javascript">
function nameSubmit() {
alert(document.getElementsByName("username").value);
}
function CakeNumber() {
alert(document.getElementsByName("numOfCake").value);
}
</script>
</head>
<body>
<form action="myservlet.do">
<table>
<tr>
<td>Name:</td>
<td><input type="text" id="name" name="username" size="10"
onchange="nameSubmit();"></td>
</tr>
<tr>
<td>Number Of Duncan's Cake:</td>
<td><input type="text" id="numOfDunCake" name="numOfCake"
size="5" onchange="CakeNumber();"></td>
</tr>
</table>
</form>
</body>
</html>
在上面的代码中,两个函数都返回undefined ..... !!我怎样才能获得真正的值？
我真的很挣扎.我想要更改img标记的src属性并获取错误消息getElementsByTagName不是函数.以下是我的测试标记
<html>
<body>
<div class="logo">
<img src="/a.jpg">
</div>
<script>
document.getElementsByClassName('logo').getElementsByTagName('img')[0].src ="/b.jpg";
</script>
</body>
</html>
任何建议表示赞赏.
javascript ×10
html ×3
dom ×2
css ×1
dynamic-data ×1
html-table ×1
innerhtml ×1
onmouseover ×1
webforms ×1