单击真棒字体图标时如何计算数字？

Question

I have some issues with the count when click on the font-awesome icon? 单击超棒字体图标时，计数有一些问题吗？ When i click now on the icon the number does not change. 当我现在单击图标时，数字不会更改。 Here is my JSfiddle. 这是我的JSfiddle。 Can anybody help me? 有谁能够帮助我？

Here is my html 这是我的html

<center><span id="timesClicked">0</span></center>

<i class="fa fa-heart-o btn btn-default" onclick="javascript:btnClick()"></i>

Javascript Java脚本

var timesClicked = 0;

function btnClick() {
timesClicked++;

document.getElementById('timesClicked').innerHTML = timesClicked;
return true
}

https://jsfiddle.net/7ghbhtcf/ https://jsfiddle.net/7ghbhtcf/

Answer 1

This Code Will Work. 该代码将起作用。 You can try this 你可以试试这个

HTML: HTML：

<div id="timesClicked">Number of Downloads: 0</div>
<i class="fa fa-heart-o" aria-hidden="true" onclick="btnClick();"></i>

JavaScript: JavaScript：

 var cnt = 0;
function btnClick() {
    cnt = parseInt(cnt) + parseInt(1);
    var updatedValue = document.getElementById("timesClicked");
    updatedValue.innerHTML = "Number of Downloads: " + cnt + "";
}

you'll need to add the css link for Font Awesome Icon. 您需要为Font Awesome Icon添加CSS链接。 and also add 并添加

jquery-1.8.2.js

or any other version that you are using. 或您使用的任何其他版本。

Answer 2

Here's a JQuery script to demo ... As the others mentioned 这是一个演示的JQuery脚本。

CSS Demo CSS演示

#nav { 
    width:480px;
    margin:1em auto;
}    
#nav ul {
    margin:1em auto; 
    padding:0; 
    font:1em "Arial Black",sans-serif; 
}    
#nav ul li{
     display:inline;
}     
#nav ul li a{
    text-decoration:none; 
    margin:0; 
    padding:.25em 25px; 
    background:#666; color:#ffffff;
}     
#nav ul li a:hover{
    background:#ff9900; 
    color:#ffffff;
}     
#nav ul li a.active { 
    background:#ff9900; 
    color:#ffffff;
}

JQuery Demo jQuery演示

<script type="text/javascript">
$(function (){

    $('#nav ul li a').each(function(){
        var path = window.location.href;
        var current = path.substring(path.lastIndexOf('/')+1);
        var url = $(this).attr('href');

        if(url == current){
            $(this).addClass('active');
        };
    });         
});

</script>

HTML Demo HTML演示

<html>
  <body>
    <div id="nav" >
      <ul>
          <li><a href='index.php?1'>One</a></li>
          <li><a href='index.php?2'>Two</a></li>
          <li><a href='index.php?3'>Three</a></li>
          <li><a href='index.php?4'>Four</a></li>
      </ul>
   </div>
 </body>

Answer 3

If you want to, you could use JQuery, which would help you get what you are looking for. 如果愿意，可以使用JQuery，它可以帮助您获得所需的内容。

 var timesClicked = 0; $(".fa-heart-o").on("click",function(){ timesClicked++; document.getElementById('timesClicked').innerHTML = timesClicked; });

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <center><span id="timesClicked">0</span></center> <i class="fa fa-heart-o btn btn-default"></i>

Answer 4

Your code seems to work fine if you load your javascript in the <head> or <body> tag. 如果将JavaScript加载到<head>或<body>标记中，则您的代码似乎可以正常工作。

单击真棒字体图标时如何计算数字？

问题描述

4 个解决方案

解决方案1
2 2017-05-19 14:09:01

解决方案2
1 2017-05-19 13:50:35

解决方案3
1 已采纳 2017-05-19 13:52:33

解决方案4
1 2017-05-19 13:54:52

单击真棒字体图标时如何计算数字？

问题描述

4 个解决方案

解决方案1 2 2017-05-19 14:09:01

解决方案2 1 2017-05-19 13:50:35

解决方案3 1 已采纳 2017-05-19 13:52:33

解决方案4 1 2017-05-19 13:54:52

解决方案1
2 2017-05-19 14:09:01

解决方案2
1 2017-05-19 13:50:35

解决方案3
1 已采纳 2017-05-19 13:52:33

解决方案4
1 2017-05-19 13:54:52