如何单击一个元素并在另一个元素中添加文本答案

【问题标题】：How to onclick one element and add text in another element如何单击一个元素并在另一个元素中添加文本
【发布时间】：2017-06-20 13:16:14
【问题描述】：

我发誓我已经尝试在整个论坛和谷歌上找到这个问题的答案，但没有找到解决方案。可能是因为我完全错了。

我正在尝试用纯 javascript 编写代码，我希望用户点击一张图片，然后计数增量显示在图片的右侧。

在我的 counter(getpic) 函数中，我收到一条错误消息“document.getElementById(cat).innerHTML = count;”一片空白。我已经检查并仔细检查过，没有什么是空的。我觉得这与 onclick 附加到图片并且无法与段落元素进行通信的事实有关，但我是新手，甚至无法在纯 JavaScript 中找到解决方法如果这个是这样的。

html

<!DOCTYPE html>
<html>

<head>

<title>Cat Click</title>


</head>


<body>

<div id="container" style="white-space:nowrap">
        <div style="display:inline;">
            <div onClick="counter(this.id)" id="Cat pic 1">
            <img src="http://example.com/pic1.png"  height="400" width="400">
            <p id="Cat id 1" style="display:inline; white-space:nowrap;"></p>
            </div>
        </div>
</div>


<div id="container" style="white-space:nowrap">
        <div style="display:inline;">
            <div onClick="counter(this.id)" id="Cat pic 2">
            <img src="http://example.com/pic2.png"  height="400" width="400" >
            <p id="Cat id 2" style="display:inline; white-space:nowrap;"></p>
            </div>
        </div>
</div>

<div id="container" style="white-space:nowrap">
        <div style="display:inline;">
            <div onClick="counter(this.id)" id="Cat pic 3">
            <img src="http://example.com/pic3.png"  height="400" width="400" >
            <p id="Cat id 3" style="display:inline; white-space:nowrap;"></p>
             </div>
        </div>
</div>

<div id="container" style="white-space:nowrap">
        <div style="display:inline;">
            <div onClick="counter(this.id)" id="Cat pic 4">
            <img src="http://example.com/pic4.png"  height="400" width="400" >
            <p id="Cat id 4" style="display:inline; white-space:nowrap;"></p>
            </div>
        </div>
</div>


<div id="container" style="white-space:nowrap">        
        <div style="display:inline;">
            <div onClick="counter(this.id)" id="Cat pic 5" >
            <img src="http://example.com/pic5.png"  height="400" width="400" >
            <p id="Cat id 5" style="display:inline; white-space:nowrap;"></p>
            </div>
        </div>
</div>

<script src="catclick.js"></script>





</body>


</html>

Javascript

var count1 = 0;
var count2 = 0;
var count3 = 0;
var count4 = 0;
var count5 = 0;

idCats = ["Cat id 1", "Cat id 2", "Cat id 3","Cat id 4","Cat id 5"]
picCats = [null, "Cat pic 1", "Cat pic 2", "Cat pic 3","Cat pic 4","Cat pic 5"] 
idCount = [null, count1, count2, count3, count4, count5]



function counter(getpic) {
    for (var i = 1; i < 6; i++) {

            if (getpic===picCats[i]) {
                var countIndex = idCount[i];
                console.log(countIndex);
                countIndex++
                count = countIndex;
                console.log(count);
                var catid = "Cat id " + i;  
                console.log(catid);
                var cat = document.getElementById(catid);
                console.log(count);
                console.log(cat);
                debugger
                document.getElementById(cat).innerHTML = count;
            } 

    }
}

【问题讨论】：

标签： javascript onclick innerhtml

【解决方案1】：

在您的示例代码中，变量 cat 是您在上面 4 行中检索到的实际 DOM 元素：

var cat = document.getElementById(catid);

有问题的行应该是：

cat.innerHTML = count;

【讨论】：

【解决方案2】：

你是这样写的：

var cat = document.getElementById(catid);
...
document.getElementById(cat).innerHTML = count;

翻译成：

var cat = document.getElementById(catid);
...
document.getElementById(document.getElementById(catid)).innerHTML = count;

正确的做法是：

var cat = document.getElementById(catid);
...
cat.innerHTML = count;

【讨论】：

【解决方案3】：

谢谢你们！我现在意识到我试图从 DOM 元素中提取两次。

另外，我意识到我的计数正在重置，因为我没有使用 splice 之类的东西来更新我的计数数组。

现在可以了！

再次感谢。

【讨论】：