如何点击一个元素并在另一个元素中添加文本

Question

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

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

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

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;
            } 

    }
}

Answer 1

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

var cat = document.getElementById(catid);

如何点击一个元素并在另一个元素中添加文本

How to onclick one element and add text in another element

javascript

onclick

innerhtml