不使用onclick和JavaScript的按钮

Question

I am trying to make buttons that adds 10, 100, and 1000 to an input and that can clear the input field, but i can't get it to work. I have tried alle the different ways i know to add the script to my document(inline and external) but i can't seem to crack the code. The debug console tells me that The functions is not defined

EDIT:

The problem seems to be that when clicking the buttons the site redirects to the index file

 var bet = document.getElementById('coincredits'); var cur = document.getElementById('coincredits').value; var coins = document.getElementById('coins').value; function clear() { bet.value = ""; } function ten() { bet.value = cur + 10; } function hundred() { bet.value = cur + 100; } function thousand() { bet.value = cur + 1000; } function xtwo() { bet.value = cur * 2; } function max() { bet.value = coins; } 

 <h4>Coins:</h4><p id="coins">123456789</p> <input type="number" name="coincredits" id="coincredits" required="" parsley-type="text" data-parsley-id="40"> <div> <button onclick="clear()">Clear</button> <button onclick="ten()">+10</button> <button onclick="hundred()">+100</button> <button onclick="thousand()">+1000</button> <button onclick="xtwo()">x2</button> <button onclick="max()">Max</button> </div> 

Answer 1

You need to get the current value every time one of your functions is called. Right now you are getting the current value of your input just once (when the script is evaluated).

ie add the line below to each of your functions: ten, hundred, thousand and xtwo

var cur = document.getElementById('coincredits').value;

Answer 2

The issue here is you only set the value of cur when the document loads.

You need to set cur to the new value before running each function.

You also need to parse your value to a number, here its an int

 var bet = document.getElementById('coincredits'); var cur = document.getElementById('coincredits').value; var coins = document.getElementById('coins').value; function updateCur() { var value = parseInt(document.getElementById('coincredits').value) if (!value) value = 0; cur = value; } function clear() { bet.value = ""; updateCur(); } function ten() { updateCur(); bet.value = cur + 10; } function hundred() { updateCur(); bet.value = cur + 100; } function thousand() { updateCur(); bet.value = cur + 1000; } function xtwo() { updateCur(); bet.value = cur * 2; } function max() { updateCur(); bet.value = coins; } 

 <h4>Coins:</h4><p id="coins">123456789</p> <input type="number" name="coincredits" id="coincredits" required="" parsley-type="text" data-parsley-id="40"> <div> <button onclick="clear()">Clear</button> <button onclick="ten()">+10</button> <button onclick="hundred()">+100</button> <button onclick="thousand()">+1000</button> <button onclick="xtwo()">x2</button> <button onclick="max()">Max</button> </div> 

Answer 3

1) put console.log('test') in the 1-st line of your javascript code, maybe it doesn't loads

2) when browser renders and binds your html code maybe he doesn't know anything about this functions

3) your javascript maybe doesn't see any html elements in the document when it implement's in this case you should wrap all your js code into $(function(){ ..... }) - it will start your js code only after DOM will be ready

Answer 4

You have two problems here. One is you are setting the bet and cur variables once on page load and not the latest value. The second is that you need to get the value of coins by doing an innerHTML of the tag.

I fixed one of your functions, this will help you fix the rest.

function max() {
    var bet = document.getElementById('coincredits');
    var cur = document.getElementById('coincredits').value;
    var coinsTag = document.getElementById('coins');
    var coins= coinsTag.innerHTML;

    bet.value = coins;
}

Answer 5

you have an problem on

var coins = document.getElementById('coins').value;

its have to be .innerHTML.

i try to rewrite your function here the complete.

 /*declare a function call hAddCoin with parameter hValue for value and option for option +,x2,clear or max*/ function hAddCoin(hValue, option){ var bet = document.getElementById('coincredits'); /*get the element*/ var coins = document.getElementById('coins').innerHTML;/*get the inner of id coins*/ var cur = parseInt(bet.value); /*get the coincredit and convert to integer*/ var res = 0; /*declare res variable for result*/ /*we need to check bet is empty or not*/ if(typeof bet.value === "undefined" || bet.value ==""){ cur = 0; } /*cek the option, it's will be +, X2 or max and default to 0*/ switch(option){ case 1:{ res = cur + hValue; }break; case 2:{ res = cur * option; }break; case 3:{ res = parseInt(coins); }break; default:{ res = 0; }break; } bet.value = res;/*set value coin creadit to result*/ } 

 <h4>Coins:</h4><p id="coins">123456789</p> <input type="number" name="coincredits" id="coincredits" required="" parsley-type="text" data-parsley-id="40"> <div> <button onclick="hAddCoin(0,0)">Clear</button> <button onclick="hAddCoin(10,1)">+10</button> <button onclick="hAddCoin(100,1)">+100</button> <button onclick="hAddCoin(1000,1)">+1000</button> <button onclick="hAddCoin(0,2)">x2</button> <button onclick="hAddCoin(0,3)">Max</button> </div>