i have searched around but cant find exactly what i need. i want the div, which contains a variable value, to update every time the variable changes. is this possible? without reloading the whole page, as this would reset the variable value.
<head>
<script> var eg=30</script>
</head>
<body>
<div> 30 </div>
<button onclick=eg++>increase</button>
</body>
how would i then make the div containing the number update
You have to write your variable to div after update it.
<head>
<script> var eg=30</script>
</head>
<body>
<div id="mydiv"> 30 </div>
<button onclick='eg++; document.getElementById("mydiv").innerHTML = eg;'>increase</button>
</body>
document.getElementsByTagName('div')[0].innerHTML = your_var;
Add this on the onclick event
<head>
<script> var eg=30</script>
</head>
<body>
<div id="display"> 30 </div>
<button onclick="eg++;document.getElementById('display').innerHTML = eg;">Increase</button>
Start by creating a function that both increases the counter, and updates the div. Then, call that function from onclick. If you place your script at the botton, you can easily remove all the inline scripts from your HTML, which would make it more organized and easier to read:
<body>
<div id="egDiv"> 30 </div>
<button id="egButton">increase</button>
<script>
var eg=30
// Function to increase the counter
function increaseEg() {
eg++;
document.getElementById('egDiv').innerHTML = eg;
}
// Add onclick handler, the simplest way:
document.getElementById('egButton').onclick = increaseEg;
</script>
</body>
Related
I was running some basic test cases with document.write() which deletes all existing HTML, in the head tag. Desired output is obtained only when I place the script in <body> tag.
Ran the script in body with success. But script is resulting in issues when used in <head> tag.
<html>
<head>
<title>Output</title>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Text";
document.write(5 + 6);
}
</script>
</head>
<body>
<p id="demo">
<button onclick="myFunction()">Touch me</button>
</p>
</body>
</html>
Expected output is -
Text
11.
But only 11 is visible.
document.write will erase everything which you had earlier. Your are initially setting the innerHTML of element with id demo to Text, but then you are using document.write, which will completely delete your existing html and replace it will 11. You can append the sum of numbers to the Text.
function myFunction() {
const num = 5 + 6;
document.getElementById("demo").innerHTML = "Text " + num;
//document.write(5 + 6);
}
<p id="demo">
<button onclick="myFunction()">Touch me</button>
</p>
If you do not have any html code, use textContent instead of innerHTML.
function myFunction() {
document.getElementById("demo").textContent = `Text ${5+6}`;
}
<p id="demo">
<button onclick="myFunction()">Touch me</button>
</p>
Placing the script in <head> is not an issue.
The write() method is mostly used for testing: If it is used after an HTML document is fully loaded, it will delete all existing HTML
Try appending the content using innerHTML attribute itself.
More Info on write :
https://developer.mozilla.org/en-US/docs/Web/API/Document/write
You can pass the string Text to the write function along with those numbers
document.write(`Text ${5+6}`)
<html>
<head>
<title>Output</title>
<script>
function myFunction() {
document.write(`Text ${5+6}`);
}
</script>
</head>
<body>
<p id="demo">
<button onclick="myFunction()">Touch me</button>
</p>
</body>
</html>
<!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>
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');.
<!DOCTYPE html>
<html>
<head>
<script>
function changetext(mypara)
{
mypara.innerHTML="Ooops!";
}
</script>
</head>
<body>
<script>var mypara = document.getElementById("para1");</script>
<h1 onclick="changetext(mypara)">Click this text to change the content of following paragraph</h1>
<p id="para1"> this is a paragraph I would like to change </p>
</body>
</html>
I would like to let user to click the heading to change the content of the paragraph, but I don't know the correct way of coding that. How to send the "mypara" parameter to myFunction() in HTML?
Your example almost works - the problem is when you execute this line:
var mypara = document.getElementById("para1");
The element you're refering to does not yet exist. You could fix it by just going inline:
<h1 onclick="changetext(document.getElementById('para1'))">...</h1>
Live example for this approach: http://jsfiddle.net/Gw5CG/2/
or perhaps just pass the id to the method:
<h1 onclick="changetext('para1')">...</h1>
and change the method to do the getElementById:
function changetext(mypara)
{
document.getElementById(mypara).innerHTML="Ooops!";
}
Live example for this approach: http://jsfiddle.net/Gw5CG/1/
The element doesn't exist yet when you're trying to get it.
Why not just get it in the event handler
<!DOCTYPE html>
<html>
<head>
<script>
function changetext() {
document.getElementById("para1").innerHTML = "Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext()">Click this text to change the content of following paragraph</h1>
<p id="para1">this is a paragraph I would like to change</p>
</body>
</html>
I have been writing ColdFusion/JS for 15 years, and this has me totally baffled!
I can run javascript to do anything inside my CFLayoutArea, but it will not let me display or change the styles in JS.
When you load the dashboard.cfm page in the layoutarea, it gives an javascript error anytime you try to change or reference (display) any style attribute related to the div element.
Here is the calling page:
function dashBoard() {
ColdFusion.navigate('dashboard.cfm','content');
}
<cflayout>
<cflayoutarea>
<cfdiv id="content" />
</cflayoutarea>
</cflayout>
Here is dashboard.cfm:
<html>
<head>
<style>
#szliderbar1{
width:37%;
}
</style>
<script>
displayProgress = function() {
var tttt = document.getElementById('szliderbar1');
alert(tttt.style.width);
}
</script>
</head>
<body>
<div id="szliderbar1"> hey
</div>
</body>
</html>
<cfset ajaxonload("displayProgress")>