I can't figure out how to have a function refer to my button so that I can have my button actually do stuff when I click it. Here is my function:
this.Click = function () {
alert('It works');
}
Here is my button in the return statement:
<button id="button" onClick="Click()">Click me!</button>
Both of these are in a larger function. I keep getting errors about my Click() function and I don't know why!! [EDIT] I'm in a .js file, not an html file
Please visit https://www.w3schools.com/ and try stuff before asking questions at stackoverflow i got this answer under 3min there
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "It works";
}
</script>
</body>
</html>Please supply more information if you can. What you have currently works
this.Click = function () {
alert('It works');
}<head>
<style>
body{
width:100%;
background-color:tan;
}
#background{
background-color:brown;
padding:2%;
border-radius:10%;
width:10%;
height:20%;
margin-left:40%;
}
#button{
background-color:tan;
padding:2%;
border-radius:10%;
}
</style>
</head>
<body>
<div id="background">
<button id="button" onClick="Click()">Click me!</button>
</div>
</body>Use this and it will work.
const $button = document.getElementById('button')
$button.onclick = function() {
console.log('clicked');
}
If you want to use on HTML, you need to create the function Click on the js file. Should be like:
js file:
function Click() {
console.log('clicked');
}
html file:
<button id="button" onclick="Click()">Click me!</button>
onclickattribute, it must be defined in the global scope. Unlessthisiswindow, the function is not global. In any case, usingaddEventListeneris almost always the better choice.