I have a JavaScript variable and I want the HTML div to output 7.
I know it's simple, but I can't seem to get my head around this.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var ball = 3+4;
</script>
</head>
<body>
<div>Have 7 output here</div>
</body>
</html>
Give a specific id to the div like:
<div id="data"></div>
Now use the following JavaScript code.
<script type="text/javascript">
var ball = 3+4;
document.getElementById("data").innerHTML=ball;
</script>
Working code is here
Write your script in body.
Code
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>Have 7 output here</div>
<script type="text/javascript">
var ball = 3+4;
document.getElementsByTagName('div')[0].innerHTML = ball;
</script>
</body>
</html>
Try this:
<head>
<script type="text/javascript">
var ball = 3+4;
function op()
{
document.getElementById('division').innerHTML=ball;
}
</script>
</head>
<body onload="op();">
<div id="division">Have 7 output here</div>
</body>
Fiddle
HTML
<html>
<body>
<div id="add_results_7"></div>
</body>
</html>
JavaScript
<script>
var ball = 3+4;
document.getElementById('add_results_7').innerHTML=ball; // Gives you 7 as your answer
</script>
Try this:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
onload = function () {
var ball = 3 + 4;
var div = document.getElementsByTagName("div")[0];
div.innerHTML = ball;
};
</script>
</head>
<body>
<div>Have 7 output here</div>
</body>
</html>
onload is executed when the page is fully loaded, so the DIV is ready to be manipulated. getElementsByTagName("div") returns a list of all DIVs in the page, and we get the first one ([0]) since there is only one DIV in your code.
Finally, I guess innerHTML doesn't require any explanation :-)
Related
The library I am using: https://github.com/icambron/moment-countdown
My code:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<!-- https://github.com/icambron/moment-countdown -->
<script src="moment.min.js"></script>
<script src="countdown.min.js"></script>
<script src="moment-countdown.min.js"></script>
</head>
<body>
<input type="datetime-local" id="timeInputHTML" onchange="mainfunc()>
<p id="pel"></p>
<script>
function mainfunc() {
timeVar = document.getElementById("timeInputHTML").value;
// var timeInputVar = moment("2045-01-01 00:00:00").countdown().toString();
var timeInputVar = moment(timeVar).countdown().toString();
document.getElementById("pel").innerHTML = timeInputVar;
}
// Run above function every 1 second
setInterval(mainfunc, 1000);
</script>
</body>
</html>
The question: How do I make the variable timeVar when it obtains its values from timeInputHTML in the HTML code, not contain contain a T in the middle like so: "2018-05-05T14:30" I believe this is what is wrong with my code and is causing the Uncaught TypeError if it is not the issue then please can you explain to me what is please?
The image / screenshot:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<!-- https://github.com/icambron/moment-countdown -->
<script src="moment.min.js"></script>
<script src="countdown.min.js"></script>
<script src="moment-countdown.min.js"></script>
</head>
<body>
<input type="datetime-local" id="timeInputHTML" onchange="mainfunc()">
<p id="pel"></p>
<script>
function mainfunc() {
timeVar = document.getElementById("timeInputHTML").value;
// var timeInputVar = moment("2045-01-01 00:00:00").countdown().toString();
var timeInputVar = moment(timeVar).countdown().toString();
document.getElementById("pel").innerHTML = timeInputVar;
}
// Run above function every 1 second
setInterval(mainfunc, 1000);
</script>
</body>
</html>
your are missing " this in input function it should be like this
<input type="datetime-local" id="timeInputHTML" onchange="mainfunc()">
I'm a super novice to javascript, and maybe this has been answered elsewhere but I can't find it because I'm still learning the terminology.
I'm trying to use the content of a div tag to define the css values of a div it is nested within.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function data(){
alert();
var sizeOverride = document.getElementById('newdata').innerHTML
alert(sizeOverride)
}
</script>
</head>
<body>
<div id=sizeChange>
<div id="newdata">
40 <!--The idea is for this to be 40px-->
</div>
</div>
<script type="text/javascript">
document.getElementById("sizeChange").style.fontSize = "sizeOverride" + "px";
</script>
</body>
</html>
Eventually the plan is to use this to define the location and label of a bar on a graph, i.e. there will be in a page that utilizes hotfields to fill in the information in the div. That framework is already built, but the goal is to use that data to define the css values of that div.
There aren't any errors but nothing is happening. It's probably something simple. I appreciate you bearing with me.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function data(){
return parseFloat(document.getElementById('newdata').innerHTML.trim());
}
</script>
</head>
<body>
<div id=sizeChange>
<div id="newdata">
40
</div>
</div>
<script type="text/javascript">
document.getElementById("sizeChange").style.fontSize = data() + "px";
</script>
</body>
</html>
So i went as far as creating an entirely new HTML document to change my H1 class to a different color. Can someone please tell me why its not working? I dont understat because I literally copied exactly how to change the color and I've done it before but its not working now.
<!DOCTYPE html>
<html>
<head>
<script>
var box = document.getElementById("box");
boxStyle = box.style;
boxStyle.color = 'red';
</script>
</head>
<body>
<h1 id="box">NBA Legends</h1>
</body>
</html>
If you move the <script> tag after the <h1> tag it will work:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 id="box">NBA Legends</h1>
<script>
var box = document.getElementById("box");
boxStyle = box.style;
boxStyle.color = 'red';
</script>
</body>
</html>
It is a best practice to put the <script> tag at the end of the document. This way the HTML renders and then the JS executes.
here its working. JS is executing before html can be render.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 id="box1">NBA Legends</h1>
</body>
<script>
var box = document.getElementById("box1");
boxStyle = box.style;
boxStyle.color = 'red';
</script>
</html>
So this is what i did when i used the put the JavaScript on a separate page:
(And i made sure the source page name is yellow.js)
<!DOCTYPE html>
<html>
<head>
<script src="yellow.js"></script>
</head>
<body>
<h1 id="box" onload="change()">NBA Legends</h1>
</body>
</html>
function change() {
var box = document.getElementById("box");
boxStyle = box.style;
boxStyle.color = 'red';
}
i am a beginner to java script.i do the bellow code for changing the text color into red using java script.But it doesn't work.what is the error in my code?
<!DOCTYPE html>
<html>
<head>
<script>
function display()
{
var col=document.getElementById("demo").innerHTML;
col.style.color="red";
}
</script>
</head>
<body>
<h1>My First JavaScript</h1>
<p id="demo">click on the button bellow.....</p>
<button onclick="display()">Display</button>
</body>
</html>
Remove innerHTML from var col=document.getElementById("demo").innerHTML;
<!DOCTYPE html>
<html>
<head>
<script>
function display()
{
var col=document.getElementById("demo");
col.style.color="#FF0000";
}
</script>
</head>
<body>
<h1>My First JavaScript</h1>
<p id="demo">click on the button below.....</p>
<button onclick="display()">Display</button>
</body>
</html>
Dont use the innerHTML, it returns a String.
Use the style on the object itself.
Check out it working: JsFiddle
You can try this ...
document.getElementById('demo').style.color = '#FF0000';
Replace this code:
function display()
{
var col=document.getElementById("demo").innerHTML;
col.style.color="red";
}
with this:
function display()
{
var col=document.getElementById("demo");
col.style.color="red";
}
Inner html would contain the html inside the demo tag, but you need to refer to the tag itself.
<!DOCTYPE html>
<html>
<head>
<script>
function display()
{
document.getElementById("demo").style.color="red";
}
</script>
</head>
<body>
<h1>Your Fixed JavaScript</h1>
<p id="demo">click on the button bellow.....</p>
<button onclick="display()">Display</button>
</body>
</html>
Here's the fixed one I just made the change of the words turn red because it wasn't
Here is source code of the simple page:
<html>
<head>
<title>Test</title>
<script src="jquery-1.4.2.js" type=text/javascript></script>
</head>
<body>
<div id="divText">Original</div>
<script type="text/javascript">
var vText = document.getElementById('divText');
vText.innerText = 'Changed';
alert(vText.innerHTML);
$('divText').text = 'Changed with jQuery';
alert(vText.innerHTML);
</script>
</body>
</html>
"jquery-1.4.2.js" file is in the same folder.
Both alerts display "original" text, text in browser also "Original"...
What is wrong with my code? Any thoughts are welcome.
1. A quick google ( took me 2 seconds ) reveals text is a function, not a property. Use it like .text('lol') as the example directly from the API.
http://api.jquery.com/text/
2. innerText isn't available in every browser/DOM property.
As you pointed out in the title you'll be wanting to change the inner html. You'll also need the $('#divText') selector to get to the div with jQuery.
<html>
<head>
<title>Test</title>
<script src="jquery-1.4.2.js" type=text/javascript></script>
</head>
<body>
<div id="divText">Original</div>
<script type="text/javascript">
var vText = document.getElementById('divText');
vText.innerHTML = 'Changed';
alert(vText.innerHTML);
alert($('#divText'));
$('#divText').html('Changed with jQuery');
alert(vText.innerHTML);
</script>
</body>
</html>