Question

我正在从udacity的javascript设计模式进行练习。我们被告知要制作一个包含猫的图片，猫的名字和计数器的页面，每当我们单击猫的图片时，计数器就会增加。如您在代码中所见，我设法做到了这一点，并使用了forloop将事件侦听器添加到每个图像中。之后，他们告诉我们我们必须更改它。现在我们必须用每只猫的名字做一个列表或索引，当我们单击任何一个名字时，那只猫的照片应该随处出现在页面上，以及它的名字和计数器。当我尝试使用forloop访问图像元素的innerHTML以便将它们添加到“ mylist”时，便出现了我的问题。当我编写代码的那部分时什么也没有发生，如果我使用forEach来创建一个包含innerhtml的属性，以便将该属性（例如object.name）放入html的列表元素中，它将创建一个列表，其中显示“ undefined”，而不是我希望它显示的innerHTML（猫的名字）。这意味着listOfImages数组中包含的html对象有问题。我需要做什么？有没有更聪明的方法可以做到这一点？为什么我不能访问img的innerHTML？谢谢

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	
	<title>Cat clicker!</title>
	<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>

<style type="text/css">
	* {
		margin: 20;
		box-sizing: border-box;
	}
	body {
		background: white;
	}
</style>

<body>
<div class = "container">
	<h1><i><b>Gatitos</b></i></h1>
	<br>
	<br>
</div>

	<div id = 0><img src="cat1.jpg" id = 0 width = 470 height = 340><h1 style = "color:red">Lucas</h1></div>

	<div id = 1><img src="cat2.jpg" id = 1 width = 470 height = 340><h1 style = "color:red">Martin</h1></div>

	<div id = 2><img src="cat3.jpg" id = 2 width = 470 height = 340><h1 style = "color:red">Pedro</h1></div>

	<div id = 3><img src="cat4.jpg" id = 3 width = 470 height = 340><h1 style = "color:red">Felix</h1></div>

	<div id = 4><img src="cat5.jpg" id = 4 width = 470 height = 340><h1 style = "color:red">Felipe</h1></div>


<div>
	<ul id = "namesList">
		<!-- here i'd like to add the innerHTMLs of each img tag -->
	</ul>
</div>





<script type="text/javascript">

	var listOfImages = Array.from(document.getElementsByTagName("img"));

	var listOfCounters = [];



	//this forloop creates a counter for each image and appends that counter to a list of h1 counter elements
	for (var i = 0; i<listOfImages.length; i++){

		//adds the links to the list
		var catName = document.createElement("h2");
		var catNameText = document.createTextNode(listOfImages[i].innerHTML);
		catName.appendChild(catNameText);
		document.getElementById("namesList").appendChild(catName);

	
		//adds the counter to each image 
		var h1 = document.createElement("h1");        
		var t = document.createTextNode(0);       
		h1.appendChild(t);                                
		document.getElementById(i).appendChild(h1);  
		
		//adds the counter to the list of counters 
		listOfCounters.push(h1);  
	};
	
	//adds the counters objects as properties of each image element, and then adds click listeners to each image, in order to update each counter 
	listOfImages.forEach(function(element, index){
		var count = 0;
		element.nombre = element.innerHTML;
		element.counter = listOfCounters[index];
		element.addEventListener("click", function(){
			element.counter.innerHTML = count +1;
			count += 1;
		});
	});
</script>

</body>

</html>

Answer 1

innerHtml允许您访问和修改标签内内的html数据。

对于<img />（它是单个标签），它内部不能包含任何数据。

如果您想访问图像的属性，可以使用

listOfImages[i].getAttribute(your desired attribute)

Answer 2

正如已经指出的那样，<img/>标签是自动闭合的，这意味着它们没有内部内容。

在这种情况下，我建议是遍历到父<div>元素（通过parentNode）并获取其textContent。这将仅包含<div>的文本和任何子元素。

例如...

document.querySelectorAll('img').forEach(img => {
  let text = img.parentNode.textContent
  console.info(img.id, img.getAttribute('src'), text)
})

div {display: none;}

<div id=0><img src="cat1.jpg" id=0 width=4 70 height=3 40><h1 style="color:red">Lucas</h1></div><div id=1><img src="cat2.jpg" id=1 width=4 70 height=3 40><h1 style="color:red">Martin</h1></div><div id=2><img src="cat3.jpg" id=2 width=4 70 height=3 40><h1 style="color:red">Pedro</h1></div><div id=3><img src="cat4.jpg" id=3 width=4 70 height=3 40><h1 style="color:red">Felix</h1></div><div id=4><img src="cat5.jpg" id=4 width=4 70 height=3 40><h1 style="color:red">Felipe</h1></div>

Answer 3

解决方案：我在想要显示在名称列表中的标题中使用了类属性。这样，我可以使用querySelectorAll（“。classname”）来获取具有我设置的类名的所有标头。谢谢你们

<div hidden id = 0><img src="cat1.jpg" id = 0 width = 470 height = 340><h1 class = "names" style = "color:red">Lucas</h1></div>

然后

var listOfNames = document.querySelectorAll(".names");

这样我就可以访问那些元素的innerHTML 谢谢！

Answer 4

其他答案已经解决了为什么img没有innerHtml的问题，我将回答是否有更好的方法。

一种更清洁的方法是处理您到目前为止所做的事情，或多或少重新开始。

我们将使用CSS隐藏和显示图像，只是使用JavaScript使用data-attribute

来跟踪点击计数

var links = Array.from(document.querySelectorAll(".cats a"));
var countTarget = document.getElementById("count");

links.forEach(function(element) {
  element.addEventListener("click", function() {
    //Get count from the data attribute and increment it
    var count = parseInt(this.dataset.clicks, 10) + 1;
    //Display it
    countTarget.innerHTML = this.innerText + " count: " + count;
    //Update data attribute
    this.dataset.clicks = count;
  })
});

* {
  margin: 20;
  box-sizing: border-box;
}

body {
  background: white;
}


/*Our links and images will be set relative to this*/

.cats {
  position: relative;
}

.cats>ul {
  /*Limit the with of the links*/
  width: 50%;
  /*Reset list styles*/
  list-style: none;
  padding-left: 0;
  /*Add some style*/
  font-size: 1.5em;
  font-weight: bold;
}

/*Style the links*/
.cats>ul a:link,
.cats>ul a:visited {
  color: #F00;
  text-decoration: none;
}

/*Position our images relative to the outer div*/
/*and hide them by default*/
.cats img {
  position: absolute;
  width: 50%;
  top: 0;
  right: 0;
  display: none;
}

/*Display the image with the id in the link*/
.cats img:target {
  display: inline-block;
}

<div class="container">
  <h1><i><b>Gatitos</b></i></h1>
</div>
<div class="cats">
  <ul>
    <li><a href="#phill" data-clicks="0">Phill</a><img id="phill" src="https://www.fillmurray.com/470/300"></li>
    <li><a href="#nick" data-clicks="0">Nicky</a><img id="nick" src="https://www.placecage.com/470/300"></li>
    <li><a href="#mittens" data-clicks="0">Mittens</a><img id="mittens" src="http://placekitten.com/470/300"></li>
    <li><a href="#funky" data-clicks="0">Funky</a><img id="funky" src="https://www.placecage.com/gif/470/300"></li>
  </ul>
  <div id="count"></div>
</div>

无法访问img元素的innerHTML属性

4 个答案: