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>
Related
How do I activate a javascript button as if a user clicked it? Could I run javascript code
to activate the button? (supposing I did not already know the code in the button, and I am on a random website where I can not change existing code)
<!DOCTYPE html>
<html>
<body>
<form action="aaa.php">
<input type="text" />
<input id="button" type="submit" />
</form>
<script>
var btn = document.getElementById("button");
//is there anything like: btn.click?
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<button id="button"onclick="myFunction()">b</button>
<!--creates the button-->
<script>
var btn = document.getElementById("button");
btn.click();
function myFunction(){
alert('working');
}
</script>
</html>
Here's one way you can handle it, call a specific function from your onClick
<!DOCTYPE html>
<html>
<button id="button" onclick="clickButton()">b</button>
<!--creates the button-->
<script>
function clickButton() {
alert("hello!");
}
</script>
</html>
To answer your question more directly, this is one way you can do it
document.getElementById('button').onclick=function(){/* some code */}
As mentioned, You can separate out HTML and javascript.
Sample.
<!DOCTYPE html>
<html>
<body>
<button id="button">Click Here</button>
<button onclick="onClickBtn(this)">Click Here 2</button>
<!--creates the button-->
<script>
var btn = document.getElementById("button");
btn.addEventListener("click", (event) => {
alert("Hi")
})
function onClickBtn(event) {
alert("Btn 2")
}
</script>
</body>
</html>
Using JavaScript (or jQuery), create a variable called “myName” and set the value to your “myName”
Create a , that when you click it, it displays an alert with your “myName” variable.
Here is the problem I am currently working. I am super new to this and just trying to figure this out. Here is the code I currently have, when I click the button it displays nothing.
<!Doctype html>
<html>
<style type=text/css>
div1 {
background-color: yellow;
}
div2 {
background-color: #000000;
color: red;
}
</style>
<body>
<div1 id="myName"><b>Woolley</b></div1>
<div2 class="Hobbies">Hockey</div2>
<div2 class="Hobbies">Hiking</div2>
<button type="button" onclick=var "myName"Woolley>Button</button>
</body>
</html>
java script
var "myName"
"Woolley"
you can check below code to change the value
<p id="changeName">Mark</p>
<button type="button" class="myevent">Button</button>
<script>
jQuery(function(){
$('.myevent').on('click', function(){
var name = "John Doe";
$('#changeName').val(name);
});
});
</script>
This is Jquery function please inlcude jquery library before use this.
Using pure Javascript:
<!Doctype html>
<html>
<style type=text/css>
div1 {
background-color: yellow;
}
div2 {
background-color: #000000;
color: red;
}
</style>
<script>
function displayName(){
var myName = "Woolley";
alert(myName);
}
</script>
<body>
<div1 id="myName"><b>Woolley</b></div1>
<div2 class="Hobbies">Hockey</div2>
<div2 class="Hobbies">Hiking</div2>
<button type="button" onclick="displayName()">Button</button>
</body>
</html>
To make the onclick on your button do something, tell the onclick what to do when triggered; In this case, I told it do execute the function myFunction.
In this function, create your variable and alert it using alert()
function myFunction() {
var myName = "Woolley";
alert(myName);
}
<!Doctype html>
<html>
<style type=text/css>
div1 {
background-color: yellow;
}
div2 {
background-color: #000000;
color: red;
}
</style>
<body>
<div1 id="myName"><b>Woolley</b></div1>
<div2 class="Hobbies">Hockey</div2>
<div2 class="Hobbies">Hiking</div2>
<button type="button" onclick="myFunction()">Button</button>
</body>
</html>
If you don't want to use a function, you can also tell onclick to execute alert() without a function:
<button type="button" onclick="var myName = 'Woolley'; alert(myName);">Button</button>
Please note that you need to use " and ' properly, otherwise your HTML is invalid and can't execute your JavaScript.
<!DOCTYPE html>
<html>
<body>
<h2>DATE&TIME</h2>
<button type="button"
onclick="document.getElementById('sun').innerHTML = Date()">
View Date</button>
<p id="sun"></p>
<button type="button"
onclick="document.getElementById('sun').innerHTML = '
'";"document.getElementById('sun1').innerHTML = 'Press to
View'";>Clear</button>
<p id="sun1"></p>
</body>
</html>
I want to perform two action while button is clicked. My above code was not work. Please give solution.
If you have more than 1 lines go separate user define function using script tag
<!DOCTYPE html>
<html>
<head>
<script>
function clearbtn(){
document.getElementById('sun').innerHTML ='';
document.getElementById('sun1').innerHTML = 'Press to View';
}
function dateTime(){
document.getElementById('sun').innerHTML = Date();
document.getElementById('sun1').innerHTML = '';
}
</script>
</head>
<body>
<h2>DATE&TIME</h2>
<button type="button" onclick="dateTime()">View Date</button>
<p id="sun"></p>
<button type="button" onclick="clearbtn()">Clear</button>
<p id="sun1"></p>
</body>
</html>
Just call a local javascript function
<button type="button" onclick="myFunction();">Clear</button>
<script>
function myFunction()
{
document.getElementById('sun').innerHTML = '';
document.getElementById('sun1').innerHTML = 'Press to View';
}
</script>
First of all, avoid inline javascript !
Gives your button an unique ID
<button type="button" id="datebutt">View Date</button>
<p id="sun"></p>
<button type="button" id="clearbutt">Clear</button>
<p id="sun1"></p>
Then in your script you can do
<script>
document.getElementById("datebutt").addEventListener("click",function(){
document.getElementById('sun').innerHTML = Date()`
},false);
document.getElementById("clear").addEventListener("click",function(){
document.getElementById('sun').innerHTML = '';
document.getElementById('sun1').innerHTML = 'Press to View';
},false);
</script>
I have the best solution for this
In js page :-
function do(){
// your code here
}
function do_more(){
// your code here
}
In Html page :-
<button onclick='do();do_more();'>Button</button>
I've tested this code in an old IE and it works, but on everything else that is modern it seems not to work.
The thing is it works only if the textarea hasn't been modified in any way, then after that it doesn't work. Any changes to the page and suddenly it ceases to function.
<html>
<script>
function clearArea() {
document.getElementById("tarea").innerHTML = "This is what\'s up.";
}
</script>
<body>
<button type="button" onclick="clearArea()">Click me to clear area</button>
<textarea id="tarea"></textarea>
</body>
</html>
Any idea what could be causing this?
Because a textarea does not have innerHTML, it has value.
function clearArea() {
document.getElementById("tarea").value = "This is what\'s up.";
}
<button type="button" onclick="clearArea()">Click me to clear area</button>
<textarea id="tarea"></textarea>
I prefer to use the value attribute, you can use it instead of innerHTML.
Here a demonstration: JSBin
Code
function clearArea() {
document.getElementById("tarea").value = "This is what's up.";
}
I think the main problem is that you forget to wrap your <script> tag in the <head> tag..
This is working :
<html>
<head>
<script>
function clearArea() {
document.getElementById("tarea").innerHTML = "This is what\'s up.";
}
</script>
</head>
<body>
<button type="button" onclick="clearArea()">Click me to clear area</button>
<textarea id="tarea"></textarea>
</body>
</html>
How do you make a link that when pressed, displays more information about something without reloading the page? (i believe it is called overflow?)
an example would be here:
https://market.android.com/details?id=com.jiwire.android.finder&feature=featured-apps
click the MORE button under the Description section, and more description is showed and the entire webpage's content slides down WITHOUT need to reload
Thanks!
Make use of this
<!DOCTYPE html>
<html>
<head>
<style>
div { background:#de9a44; margin:3px; width:80px;
height:40px; display:none; float:left; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
Click me!
<div></div>
<div></div>
<div></div>
<script>
$(document.body).click(function () {
if ($("div:first").is(":hidden")) {
$("div").slideDown("slow");
} else {
$("div").hide();
}
});
</script>
<script>
$(document.body).click(function () {
if ($("div:first").is(":hidden")) {
$("div").show("slow");
} else {
$("div").slideUp();
}
});
</script>
</body>
</html>