Click count using JavaScript for many buttons with default value '0'

89
May 30, 2021, at 10:40 AM

I want to use a click count function in JavaScript to measure the number of clicks on a button in otree. The data should be stored in the database using a hidden input field.

The function should store the value '0' if the button has not been clicked and the number of clicks if the button has been clicked. The objective is to avoid error messages in otree due to empty input fields. In additon, I want to use the function for a lot of buttons (10-20 buttons).

Many thanks!

<button type="button" onclick="buttonClicked('num_clicks', 'num_clicks_feedback')">Click me</button>
<span id="num_clicks_feedback"></span>
<input type="hidden" name="num_clicks" id="num_clicks"/>
<script>
    let numClicks = 0;
    function buttonClicked(id, id_2) {
        numClicks++;
        // this stores it in the database
        document.getElementById(id).value = numClicks;
        // this just displays it back to the user
        document.getElementById(id_2).innerText = numClicks;
    }
</script>```
Answer 1

You could pass this to the buttonClicked() function and then store the click counter as a property of the button itself.

function buttonClicked(btn) {
  btn.click_counter = (btn.click_counter || 0) + 1;
  document.getElementById('num_clicks_feedback').textContent =
    `btn ${btn.getAttribute('data-id')} has been clicked ${btn.click_counter} times`;
}
<button data-id="foo" onclick="buttonClicked(this)">Click me</button>
<button data-id="bar" onclick="buttonClicked(this)">Click me</button>
<button data-id="steve" onclick="buttonClicked(this)">Click me</button>
<button data-id="321" onclick="buttonClicked(this)">Click me</button>
<button data-id="submit" onclick="buttonClicked(this)">Click me</button>
<button data-id="abort!" onclick="buttonClicked(this)">Click me</button>
<p id="num_clicks_feedback"></p>

Then when you want to update the database, you can just grab the property value from the button.

document.querySelector('button[data-id="submit"]').click_counter || 0;

Note: if you absolutely have to use an <input>, it's value will always be of type string. So unless you convert it, you could run into some issues if you try to do math with it later on.

READ ALSO
Django login error, LOGIN_REDIRECT_URL is not working

Django login error, LOGIN_REDIRECT_URL is not working

When I click the login button the next page shows HTTP ERROR 405

96
Notifiy my RecyclerView that data has changed

Notifiy my RecyclerView that data has changed

I am developing an shop app in android and got a question about transfering data between two adapterclassesThis is the scenario:

94
Add animation to React Slider

Add animation to React Slider

I have a very simple react sliderThere's an option to navigation between the slides

76
Mysql like query suggest best indexes for fast response

Mysql like query suggest best indexes for fast response

My query takes 90sec for return only 20 rowsQuery has some join and like query for searching keywords

54