<!DOCTYPE html>
<html>
<body>
<h1>Welcome !</h1>
<p><b>AN OBJECT</b> is also a variable.<b>Thus an object can also be used to store many values.</b></p>
<p id="demo">Click the button given below !</p>
<button type="button" onclick="me()">Click Here !</button>
<script>
function me()
{
var car ={
model:"BMW",class:"C",weight:"500",}
document.getElementById("demo").innerHTML=car.model+"<br>"+car.class+"<br>"+car.weight;
}
}
</script>
</html>
How do I execute the code in such a way that when I press "Click Here !" it is possible for me to see all the properties mentioned in the code ?
You have an extra } in your code. Another way you can do this is that you can pass the car object to me function from the onClick event as you can make that dynamic depending on who the user is.
<button type="button" onclick='me({model:"BMW",class:"C",weight:"500"})'>Click Here !</button>
<script language="javascript" type="text/javascript">
function me(car){
document.getElementById("demo").innerHTML=car.model+"<br>"+car.class+"<br>"+car.weight;
}
</script>
Related
I am trying to create an alert function using the getElementById and it is not working. This is a very simple button i am trying to create but obviously its not simple for a noob like me. Thank you for all your help in advance. This is what i currently have:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>alert</title>
</head>
<body>
<button onclick= "click()" style="color:green;" >click</button>
<script>
function click() {
document.getElementById("alerting").innerHTML = "I am an alert";
}
</script>
</body>
</html>
You need to add an element with id="alerting" where your text will appear. Otherwise document.getElementById("alerting") will return null and calling innerHTML on it will throw error.
<body>
<button onclick= "myFunction()" style="font-size:25px;" >click</button>
<p id="alerting">element with alerting id. value will change here</p>
<script>
function myFunction() {
document.getElementById("alerting").innerHTML = "Hello World";
}
</script>
</body>
You dont have any html elements with id="alerting" into which you can set the innerHTML.
If you want a popup alert instead of doing the innerHTML thing... just do:
alert("I am an alert");
Also of note... some browsers wont like functions named: "click".
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>alert</title>
</head>
<body>
<button onclick="someFunction()" style="color:green;" >Click Me</button>
<script>
function someFunction()
{
alert("I am an alert");
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction(demox)">Click me</button>
<p id="demo"></p>
<p id="demox"></p>
<script>
function myFunction(cat) {
var dog = document.getElementById( cat);
dog.innerHTML = "Hello World";
}
</script>
</body>
</html>
I am trying to pass an id value of "demox" to a js function to display some text with an onclick event, but it doesn't seem to work. what is the problem here?
You can find script modified which solve your issue here.
https://jsbin.com/yitovikete/edit?html,output
Generally, I would suggest you to add <script> tag within the header of your HTML page like this:
https://jsbin.com/yitovikete/1/edit?html,output
This is good when you need to do something while the body is loading, or want to maybe make some ajax requests.
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction('demox')">Click me</button>
<p id="demo"></p>
<p id="demox"></p>
<script>
function myFunction(cat) {
var dog = document.getElementById( cat);
dog.innerHTML = "Hello World";
}
</script>
</body>
</html>
here it is:
<!DOCTYPE html>
<html>
<body>
<hl>Change an HTML element</hl>
<p id="msg">Now you see me.</p>
<button type="button"
onclick="document.getElementById('msg').innerHTML = 'Gone!'">
Click Me!</button>
<button type="button"
onclick="document.getElementById('msg').innerHTML = 'Back again!'">
Bring me back!</button>
</body>
</html>
does anyone recommend a way to fix this, because I am stumped.
Though we should create the javascript file separately in real projects. But you can try the following code to test the stuff what you are trying to do/test.
<!DOCTYPE html>
<html>
<body>
<hl>Change an HTML element</hl>
<p id="msg">Now you see me.</p>
<button type="button" id="clickMeButton" onClick = clickMeClicked()>
Click Me!</button>
<button type="button" id="backMeButton" onClick = backMeClicked()>
Bring me back!</button>
<script>
function clickMeClicked() {
document.getElementById("clickMeButton").innerHTML = 'Gone!';
}
function backMeClicked() {
document.getElementById("backMeButton").innerHTML = 'Back again!';
}
</script>
</body>
</html>
Im trying to add one to a variable on the push of a button in javascript. Here's what I have:
<html>
<head>
</head>
<body>
<script language="javascript" type="text/javascript">
var add = 0;
function add1(){add++}
document.write(add);
</script>
<br/>
<input type="button" value="Add One" onclick="add1()" />
</body>
</html>
Well most likely the variable add is being incremented by 1 when you push the button. However that code isn't really doing what you want.
This is probably more like what you're after:
<html>
<head>
</head>
<body>
<script language="javascript" type="text/javascript">
var add = 0;
function add1(){
add++;
document.getElementById('numberField').innerHTML = add;
}
</script>
<span id="numberField"></span>
<input type="button" value="Add One" onclick="add1()" />
</body>
</html>
When you do document.write(add) it's replacing everything in the body with the value of add.
We moved the "writing the value" piece of code into the function that is called when you press the button. This is so we redraw the number after it has been incremented.
By updating the contents of an html tag instead of the entire page, we don't loose the button. The html tag has the id numberField, and can be accessed with document.getElementById('numberField');.
This is a simple example to call a JS function when a button is clicked. In this code I used the onclick method, but I want to learn how to call the same method using jQuery instead.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#but").click(
doubleSize($("#inpt").val()); // **maybe not correct here**
);
});
function doubleSize(x)
{
//some code make a number double size
}
</script>
</head>
<body>
<input id="inpt" type="text">
<button id="but" type="button" onclick="doubleSize(document.getElementById('inpt').value)" >click me !!</button>
<div><span id="result"></span>
</div>
</body>
</html>
Replace
$("#but").click(
doubleSize($("#inpt").val()); // **maybe not correct here**
);
with
$("#but").click(function() {
doubleSize($("#inpt").val());
});
Now it should work. The trick is that .click function has callback function which controlls doings after click, and you now learned to use it.
Check my fiddle.
Find more on api.jquery.com/click.