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
Related
I am trying to change the font size by clicking on button and using paragraph id
Trying to create a button which is on click will change the font size of my first javascript
code :-
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript in Body</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
<button type="button" onclick='document.getElementById("demo").style.fontSize="20px";' >click me</button>
</script>
</body>
</html>
my output is coming : JavaScript in Body
actual output which i want to come:
JavaScript in Body
My First JavaScript
button(click me)
You should get the button out of the script tag.
it should look like this.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript in Body</h2>
<button type="button"
onclick='document.getElementById("demo").style.fontSize="20px";' >click me</button>
<p id="demo">
</p>
</body>
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
</html>
The button shouldn't be inside the script tag. Put it before or after the </script> tag.
Only JavaScript should be in the script tag.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript in Body</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
<button type="button" onclick='document.getElementById("demo").style.fontSize="20px";' >click me</button>
</body>
</html>
So I need some help, I am new to JS and I need to to find a solution to the problem I am having. I am trying to create a button when it clicks changes a piece of text. When I create a JS function in the script tag header and reference the function in the button onclick it works, but it doesn't work in a separate JS file. The HTML code is below. Hopefully, someone can help me.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="changetext.js"></script>
<script>
function Button() {
document.getElementById("demo").innerHTML = "hello";
}
</script>
<script>
function Button2() {
document.getElementById("demo").innerHTML = "hi";
}
</script>
</head>
<body>
<p id="demo"> hi</p>
<button id="ButtonText" onclick="Button()"> Click Here To Change The Text</button>
<button id="ButtonText2" onclick="Button2()"> Click Here To Change The Text Back</button>
<script type="text/javascript" src="changetext.js"></script>
</body>
</html>
this is an example...
<!DOCTYPE html>
<html>
<head>
<title>example</title>
</head>
<body>
<p id="demo"> hi</p>
<button id="ButtonText" onclick="Button()"> Click Here To Change The Text</button>
<button id="ButtonText2" onclick="Button2()"> Click Here To Change The Text Back</button>
<script type="text/javascript" src="changetext.js"></script>
</body>
</html>
first you need remove your script.. we include script only if you dont use a external js.
on your external js(changetext.js)
function Button(){
document.getElementById("demo").innerHTML = "hello from button 1";
}
function Button2(){
document.getElementById("demo").innerHTML = "Hellow from button2";
}
result:
if you dont use a external js the code is this:
<!DOCTYPE html>
<html>
<head>
<title>example</title>
</head>
<body>
<p id="demo"> hi</p>
<button id="ButtonText" onclick="Button();"> Click Here To Change The Text</button>
<button id="ButtonText2" onclick="Button2();"> Click Here To Change The Text Back</button>
<script type="text/javascript" src="changetext.js"></script>
</body>
</html>
<script>
function Button(){
document.getElementById("demo").innerHTML = "hello from button 1";
}
function Button2(){
document.getElementById("demo").innerHTML = "Hellow from button2";
}
</script>
we write the code js in the tag script good luck !!
Write your function in changetext.js and make sure that is in same place as your HTML file.
change onclick to onClick
and remove your script tags in the head
I am trying to add innerHtml of element named as P.I had added its attribute id which has value p1. And i had tried to changes it innerhtml while onclick of a button.But overall i am failed to do so. And i still have no idea why its not doing so.
<!DOCTYPE html>
<html>
<head>
<title>javascript </title>
</head>
<body>
<button onclick="myfunction()">click me</button>
<p id="new"> this my content added by manully</p>
<p id="p1"></p>
<script type="text/javascript">
document.getElementById("new").innerHtml="this is my first page";
function myfunction(){
//alert(1);
document.getElementById("p1").innerHtml="this is my first page";
//console.log();
}
</script>
</body>
</html>
I am following this example which is showing results successfully.Please have an eye on it.
<!DOCTYPE html>
<html>
<body>
<p>Click the button to trigger a function that will output "Hello World" in a p element with id="demo".</p>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
</script>
</body>
</html>
I was using wrong syntax of javascript function which is named as innerHTML but i was using it as innerHtml.
<!DOCTYPE html>
<html>
<head>
<title>javascript </title>
</head>
<body>
<button onclick="myfunction()">click me</button>
<p id="new"> this my content added by manully</p>
<p id="p1"></p>
<script type="text/javascript">
document.getElementById("new").innerHTML="this is my first page";
function myfunction(){
//alert(1);
document.getElementById("p1").innerHTML="this is my first page";
//console.log();
}
</script>
</body>
</html>
try this :
<script>
$(document).on('click', '#new', function () {
$(this).html('my msg');
})
</script>
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 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 :-)