我想实现 记录并显示多条链接的点击次数(每条链接都有独立的记录),但是当我在第二个input标签里想输出时,没办法显示次数。但第一个input标签能够顺利显示点击次数。点击第二个以后的链接,会报出错误:
Uncaught TypeError: Cannot set property 'value' of null
at count1 (链接 .js:11)
具体HTML如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="../code/css/链接.css">
<title>你想要的全在这里</title>
<base target="_blank">
</head >
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="../code/js/链接 .js"></script>
<body>
<!--@ JAVA块 -->
<div class="Wdiv">
<div class="Idiv" >
<h1>关于JAVA
<ul>
<li>
<a class="Link1" onclick="count1(this)" href="https://www.cnblogs.com/zhuchuanliang/p/7172972.html">JDBC中execute、executeQuery和executeUpdate的区别 </a>
<input type="text" class='JI1' id="J1" readonly>
</li>
<!-- <script>
if(!window.localStorage){
alert("浏览器不支持localstorage");
}else{
alert("浏览器支持localstorage");
}
</script> -->
</ul>
</h1>
</div>
</div>
<!-- @HTML块 -->
<div style="clear:both"></div>
<div class="Wdiv">
<div class="Idiv" >
<h1>关于HTML+CSS+JS
<ul>
<li><a class="HTML1" onclick="count1(this)" href="https://blog.csdn.net/tim_phper/article/details/51902236">浅谈DIV居中方式(带实例) </a></li>
<input type="text" class="HI1" id="H1" readonly>
<li><a class="HTML2" onclick="count1(this)" href="https://www.cnblogs.com/st-leslie/p/5617130.html">localStorage使用总结</a></li>
<input type="text" class="HI2" id="H2" readonly>
<li><a class="HTML3" onclick="count1(this)" href="https://www.cnblogs.com/sharpest/p/9023526.html">JS页面刷新保持数据不丢失</a></li>
<input type="text" class="HI3" id="H3" readonly>
</ul>
</h1>
</div>
</div>
<!-- @数据库块 -->
<div style="clear:both"></div>
<div class="Wdiv">
<div class="Idiv" >
<h1>数据库
<ul>
<li><a href="https://www.cnblogs.com/franky2015/p/4656486.html">SQL数据库语句练习题目 </a></li>
</ul>
</h1>
</div>
</div>
<!-- <script>
window.localStorage.clear();
</script> -->
</body>
</html>
下面是js文件内容:
function count1(obj){
if (localStorage.getItem($(obj).attr('class'))!=='undefined')//如果getItem参数 即key 不存在 则
{
localStorage.setItem( $(obj).attr('class') , JSON.stringify (Number(localStorage.getItem($(obj).attr('class'))) + 1 ) );
}
else
{
localStorage.setItem($(obj).attr('class'),'1')
}
/* document.getElementById('test').value = localStorage.getItem($(obj).attr('class')); */
document.getElementById($(obj).next().attr('id')).value = localStorage.getItem($(obj).attr('class'));
}