I can't get my html to call my js
Question
Can anyone help me? I am trying to get it to call the click() function when you click the button but nothing happens. The alerts are for testing purposes, and the js will be exported to an external js when I can get it working. Thanks =)
<!DOCTYPE html />
<html>
<head>
<title>Idle Numbers</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<h1>Idle Numbers</h1>
<p>Number Bank: <span id="numberBank">0</span> | Numbers per Second: <span id="NpS">0</span> | Numbers per Click: <span id="NpC">1</span></p>
<button onclick="click()">Click me</button>
<table id="shop">
<tr>
<th colspan="4">Shop</th>
</tr>
<tr>
<td><p>Ones Place <button onclick="onesPurchase" id="buyOnes">25</button></p></td>
<td><p>Tens Place <button onclick="tensPurchase" value="100" id="buyTens">100</button></p></td>
<td><p>Hundreds Place <button onclick="hundredsPurchase" id="buyHundres">250</button></p></td>
<td><p>Thousands Place <button onclick="ThousandsPurchase" id="buyThousands">2500</button></p></td>
</tr>
</table>
<script type="text/javascript">
var nB, NpS, onesValue, tensValue, hundredsValue, thousandsValue;
var NpC = 1;
function click(){
alert("numberBank");
numberBank = nB + NpC;
alert("numberBank");
document.getElementById("numberBank").innerHTML = nB;
}
</script>
</body>
</html>
4 answers
solution1
0 2015-10-28 20:23:29
You do not have defined functions for onesPurchase, tensPurchase, etc. where you have the onclick handlers initialized. If you are trying to bind the click() function to the onclick handlers, you would just have
<td><p>Ones Place <button onclick="click();" id="buyOnes">25</button></p></td>
See: Using an html button to call a javascript function
If you want to change how the click function acts, you'd probably want some sort of argument defined where you created the click() function that determines which purchase you are calculating.
solution2
0 ACCPTED 2015-10-28 20:29:50
This problem is due to naming your function as click(). This function name is assigned to the button by default to handle the mouseclick event. It is best to use function names that are more descriptive anyways.
Simply changing to calculate() works:
HTML
<button onClick="calculate()">Click me</button>
JS
function calculate() {
alert("numberBank");
numberBank = nB + NpC;
alert("numberBank");
document.getElementById("numberBank").innerHTML = nB;
}
solution3
0 2015-10-28 20:48:16
.click() is a built-in function in javascript.
You can override the normal function by changing
function click(){
to
click()=function(){
I don't recommend it though. Best to follow shredMER's answer and change the function name.
solution4
0 2015-10-28 20:50:25
The button element already has a click() method which simulates a mouse-click on the button element. The button element's click() method will get called instead of your click() method. As shreadMER suggests, rename your click() method to something else. For example...
HTML
<button onclick="btn_click()">Click me</button>
JS
function btn_click() {
alert("numberBank");
numberBank = nB + NpC;
alert("numberBank");
document.getElementById("numberBank").innerHTML = nB;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.