Я не могу сделать этот счетчик JavaScript

-4

Я хочу сделать кнопку (из divs) и абзац (или любое текстовое поле) под разделителями, которые подсчитывают клики.Я не могу сделать этот счетчик JavaScript

$(document).ready(function() { 
 
    $('#butt').mousedown(function() { 
 
    $("#butt").hide(); 
 

 
    }); 
 
    $("#pushed").mouseup(function() { 
 
    $("#butt").show(); 
 

 
    }); 
 
    $("#butt").click(function() { 
 
    button_click(); 
 
    }); 
 
}); 
 

 

 
var clicks = 0; 
 

 
function button_click() { 
 
    clicks = parseInt(clicks) + parseInt(1); 
 
    var divData = document.getElementById("showCount"); 
 
    divData.innerHTML = "Clicks:" + clicks; 
 
}

<!-- <link type="text/css" rel="stylesheet" href="CSS.css"/> --> 
 
<form name="ButtonForm"> 
 
    <div id="container"> 
 

 
    <div id="pushed"></div> 
 

 
    <div id="butt"></div> 
 

 
    </div> 
 

 
    <div id="showCount"></div> 
 

 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script> 
 
    <!--<script src="Untitled-1.js" type="text/javascript"></script>--> 
 
</form>

источник

2016-12-20 Benedek Germán

В чем проблема? – Carcigenicate

В принципе, клик не зарегистрирован вообще, потому что вы скрываете кнопку на mousedown. Что этот код должен делать вообще? Когда вы удаляете этот код и применяете простой счетчик, все работает: https://jsfiddle.net/1tpj1box/ – sinisake

. В чем смысл 'parseInt (1);'? Я бы ожидал, что это бросить. Вы проверили консоль на наличие ошибок? – Carcigenicate

Ваши div элементы являются пустыми и нет CSS, чтобы дать им какой-либо явный размер, так что они никогда не будут открыты для вас, чтобы нажать на них.

Кроме того, обработчик события mousedown может и должен быть объединен с click обработчиком butt и обработчиком события mouseup должен быть просто click события, а также.

Кроме того, вам нужно только обновить количество кликов, а не слово «щелчки», так что отдельный заполнитель для числа с span элемента, а затем вы можете жестко закодировать слово «щелкает» в div ,

Наконец, чтобы увеличить число на единицу, вы можете просто использовать оператор pre или post-increment (++).

$(document).ready(function() { 
 
    var clicks = 0; 
 
    var divData = $("#clickCount"); 
 
    
 
    $("#pushed").on("click", function() { 
 
    $("#butt").show(); 
 
    }); 
 
    
 
    $("#butt").on("click", function() { 
 
    $("#butt").hide(); 
 
    clicks++; // increment the counter by one 
 
    divData.html(clicks); 
 
    }); 
 
});

#pushed, #butt {height:50px; width:150px; background-color:green; margin:5px;}

<body> 
 
    <form name="ButtonForm"> 
 
    <div id="container"> 
 

 
     <div id="pushed"></div> 
 

 
     <div id="butt"></div> 
 

 
    </div> 
 

 
    <div id="showCount">Clicks <span id="clickCount"></span></div> 
 

 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script> 
 
    </form> 
 
</body>

источник

2016-12-20 19:50:50

Прежде всего, вы должны упростить код. Скрытие и отображение кнопки не обязательно для получения результата, который вы ищете.

Во-вторых, измените элемент #butt на фактическую кнопку, чтобы у вас было что посмотреть и нажмите.

В-третьих, убедитесь, что ваш скрипт загружается после включения jquery.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script> 

<button id="butt">I'm a button</button> 
<div id="showCount"></div> 

<script> 
$(document).ready(function() { 

    $("#butt").click(function() { 
    button_click(); 
    }); 

    var clicks = 0; 

    function button_click() { 
    clicks = parseInt(clicks) + parseInt(1); 
    var divData = document.getElementById("showCount"); 
    divData.innerHTML = "Clicks:" + clicks; 
    } 

}); 
</script>

источник

2016-12-20 20:02:28 Richard

Возможно, OP хочет подсчитать, сколько раз скрывается второй 'div'. Кроме того, использование элементов 'div' здесь не является сделкой. Эти вопросы следует решать в ответ. –

Я не могу сделать этот счетчик JavaScript

ответ

Смежные вопросы