时间戳

首页 > 解决方案 > Javascript onClick 计数器不起作用

javascript - Javascript onClick 计数器不起作用

问题描述

我正在编写 Like-Hate 的 javascript 计数器。

我的 HTML 代码如下。（该代码是从 PHP 代码中解析出来的）

<img id='like1' src='./imoticon/good.png' style='width:23px;height:23px;' title='좋아요' value='1' onclick='onClick(this.value)'>좋아요
<img id='hate1' src='./imoticon/bad.png' style='width:23px;height:23px;' onclick='onClick(this.value)' value='-1' title='싫어요'>싫어요

和 onClick javascript 代码是一样的。

var like_clicks = 0;
var hate_clicks =0;
function onClick(int) {

    like_clicks = like_clicks + document.getElementById("like1").value;
    hate_clicks = hate_clicks + document.getElementById("hate1").value;

    document.getElementById("like1").innerHTML = like_clicks;
    document.getElementById("hate1").innerHTML = hate_clicks;
};

但是计数器不起作用。请帮我一个建议。

标签： javascripthtml

解决方案

在javascript中使用this代替this.value和使用方法getAttribute

<img id='like1' src='./imoticon/good.png' style='width:23px;height:23px;' title='좋아요' value='1' onclick='onClick(this)'/>좋아요
<img id='hate1' src='./imoticon/bad.png' style='width:23px;height:23px;' onclick='onClick(this)' value='-1' title='싫어요'>싫어요/>

在 JavaScript 中：

function onClick(int) {
//alert('click');
console.log(int.getAttribute('value'));
}


<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<img id='like1' src='./imoticon/good.png' style='width:23px;height:23px;' title='좋아요' value='1' onclick='onClick(this)'/>좋아요
<img id='hate1' src='./imoticon/bad.png' style='width:23px;height:23px;' onclick='onClick(this)' value='-1' title='싫어요'>싫어요/>




<script>
function onClick(int) {
alert(int.getAttribute('value'));
console.log(int.getAttribute('value'));
}
</script>
</body>
</html>

推荐阅读