I started to work on a clicker game in JavaScript, but it's not working. I used the console to inspect the element to find out why it won't add anything to money and I don't think it is showing the variable either because it won't even show a 0.
<!doctype html>
<html lang="en">
<head>
<script>
function addMoney() {
var money
money+1;
var cash = document.getElementById("showmoney");
cash.innerHTML=money;
}
</script>
<meta charset="utf-8">
<title>clicker game</title>
</head>
<p id="showmoney"></p>
<body>
<button id="click" onClick="addMoney">click</button>
</body>
</html>
The call to the function should have parenthesis () :
<button id="click" onClick="addMoney()">
Instead of :
<button id="click" onClick="addMoney">
Also you have to init you variable money and to define it in the global scope so it will not return to default value zero on every click :
var money=0;
Hope this helps.
<!doctype html>
<html lang="en">
<head>
<script>
var money=0;
function addMoney(){
money++;
var cash = document.getElementById("showmoney");
cash.innerHTML=money;
}
</script>
<meta charset="utf-8">
<title>clicker game</title>
</head>
<p id="showmoney">
</p>
<body>
<button id="click" onClick="addMoney()">
click
</button>
</body>
</html>
Related
This text is a link. How do I put this into the copy buffer (e.g. via navigator.clipboard.writeText()) so that when the user pastes it somewhere else it retains the link text as well as the link itself?
Thanks in advance!
When u use addEventListener, you can extract all information from the event.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test page</title>
</head>
<body>
<a class="link" href="https://stackoverflow.com/">Stackoverflow</a>
<script>
const linkComponent = document.querySelector('.link');
linkComponent.addEventListener('click', (event) => {
event.preventDefault(); // This will prevent the default action (going to link)
navigator.clipboard.writeText(`${event.target.innerHTML} - ${event.path[0].href}`);
});
</script>
</body>
</html>
I use ClipboardJs, it work for gmail or other email clients
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
</head>
<body>
<div id="container">
test link
</div>
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#container">Click me</button>
<script>
let clipboard = new ClipboardJS(".btn", {})
.on("success", function () {
console.log('success')
})
.on("error", function () {
console.log('error')
});
</script>
</body>
</html>
I was getting this error in my console while trying to execute a function using the "onclick" event inside of a button. The error I got was,
Uncaught ReferenceError: foo is not defined
onclick http://localhost:3001/bar:1
onclick http://localhost:3001/bar:1
I defined foo like this in the <body> tag followed by a script tag,
function foo(){
fooBar();
}
Thanks.
Edit: Heres my code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="app lol">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<title><% title %></title>
</head>
<body>
<script>
function foo() {
fooBar();
}
</script>
<button onclick="foo()">bar</button>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="app lol"> <script src="unpkg.com/axios/dist/axios.min.js">
</script>
<title></title>
</head>
<body>
<script>
function fooBar()
{
alert("hey");
}
function foo()
{
fooBar();
}
</script>
<button onclick="foo()">bar</button>
</body>
</html>
<html>
<head><title></title></head>
<body>
<button id="btn" onClick="foo()">Click me </button>
<script>
btn = document.getElementById("btn");
function foo(){
btn.style.color = "red";
}
</script>
</body>
</html>
This works!
Add an ID to your button. onclick is kinda buggy, because Google security features prevent you from doing so. It is even a good idea to separate JavaScript and HTML.
I usually assign an ID to a div, and querySelector them.
<div id="an-id">
<input />
</div>
document.querySelector("#an-id").querySelector("input").addEventListener("click", foo);
(Put your script after the button)
Is this how your setup looks? If yes, there shouldn't be any error.
<script>
function foo () {
console.log('Foo function');
}
</script>
<button onclick="foo()"> My Button </button>
If the value of an input is stored in a variable and the variable is declared in outside a function (global) and the value stored in variable retrieved from the function , it gives either give undefined or empty string BUT if variable is declared inside the function if works as intended
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<script>
var a = document.getElementById("txt").value;
function dis(){
console.log(a);
}
</script>
</head>
<body>
<input type="text" id="txt">
<button onclick="dis()">Click</button>
</body>
</html>
The problem you seem to encounter is not one of scope but of timing: When you declare your variable a the input is still empty. So the result you get shown will also be empty. No matter what current contents the input field might hold at the time.
The following, modified, version should achieve what you wanted:
var a = document.getElementById("txt")
function dis(){
console.log(a.value);
}
<input type="text" id="txt">
<button onclick="dis()">Click</button>
you should update a every time dis called:
and make sure dom content is loaded.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<script>
window.addEventListener('DOMContentLoaded', (event) => {
var a = document.getElementById("txt").value;
});
function dis(){
a = document.getElementById("txt").value;
console.log(a);
}
</script>
</head>
<body>
<input type="text" id="txt">
<button onclick="dis()">Click</button>
</body>
</html>
I want to change the meta tag content i.e. refresh rate and url dynamically using javascript. Using a button to enable javascript function. Tried 3 alternatives but not working. Please help.
Thanks,Amresh
<!DOCTYPE html>
<html>
<head>
<meta HTTP-EQUIV="refresh" name="description" id="mymetatag"
content="5;URL=http://localhost:6985/ChartJSDemo/Is_Mainpage.html">
<meta charset="ISO-8859-1">
<title>Processing Details</title>
<link rel="stylesheet" type="text/css" href="css/MF_job_failTable.css">
</head>
<body>
<button onclick="myFunction()">Click me</button>
<script>
function myFunction() {
<!--document.querySelector('meta[name="description"]').setAttribute("content","5;URL=http://google.co.in");-->
<!--document.getElementById("mymetatag").setAttribute("content", "5;URL=http://google.co.in");-->
var m = document.createElement('meta');
m.name = 'description';
m.id = 'mymetatag';
m.content = '5;URL=http://google.co.in';
m.HTTP-EQUIV= 'refresh';
document.head.appendChild(m);
}
</script>
This works for me.
The issue could have been that you tried a first code which did not work and you commented the code with HTML comments <!-- [...] -->instead of Javascript comments: // [...] or /** [...] */.
<!DOCTYPE html>
<html>
<head>
<meta HTTP-EQUIV="refresh" name="description" id="mymetatag" content="5;URL=http://localhost:6985/ChartJSDemo/Is_Mainpage.html">
<meta charset="ISO-8859-1">
<title>Processing Details</title>
<link rel="stylesheet" type="text/css" href="css/MF_job_failTable.css">
</head>
<body>
<button onclick="myFunction()">Click me</button>
<script>
function myFunction() {
document.getElementById("mymetatag").setAttribute("content", "5;URL=http://google.co.in");
}
</script>
</body>
</html>
I looks like you misuse the functionality of metatags, JS doesn't save the state between requests. And, BTW, you can do reload/redirect using the javascript itself.
sorry for question, I cant figure it out.
If:
<body onclick="myFunction(event)">
<p>Paragraph</p>
<h1>This is a heading</h1>
<button>This is a button</button>
<p id="demo"></p>
<script>
function myFunction(event) {
var x = event.target;
document.getElementById("demo").innerHTML = x.tagName;
}
</script>
</body>
how can I display the function result in current HTML element, which I clicked on? Not in "demo".
You have to change your HTML Code To be :
onclick="myFunction(this);"
In Your Case it will be :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="button" onclick="mFunction(this);" ID='TER' value="Heeeey">
</body>
<script>
function mFunction(obj){
obj.value = "My Result" ;
}
</script>
</html>
Hope you have done with event.target.nodeName
<body onclick="myFunction(event)">
<p>Paragraph</p>
<h1>This is a heading</h1>
<button>This is a button</button>
<p id="demo"></p>
<script>
function myFunction(event) {
var x = event.target;
x.innerHTML = x.nodeName;
}
</script>
</body>
The function doesn't have a result in the sense that it doesn't return anything. But in general, if you are trying to set the innerHTML of the object that you just clicked to 'something' you should be able to do
event.target.innerHTML = 'something'