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';
}
Related
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'm making an application with the LoL (league of legends) api.
Currently I'm having trouble with my input. First I made an inputbox and submitbutton in JavaScript and wrote some code so I could use it.
var inputbox = document.createElement("input");
inputbox.type = "input";
document.body.appendChild(inputbox);
var button = document.createElement("input")
button.type = "button";
button.value = "Press me!";
document.body.appendChild(button);
Afterwards I used this code to use the input value.
button.addEventListener("click", function() {
LookUpSummonerInformation(inputbox.value);
});
My question is how can I put this into my index.html instead of my js file.
I can't use a form to do it as it will probably be a single page application.
Thanks in advance.
<!DOCTYPE html>
<html>
<head>
<title>LoL Thing</title>
</head>
<body>
<input type='input' id='lol-input'></input>
<button onclick='do_the_thing();'>Press me!</button>
<script>
function do_the_thing() {
var inputbox = document.querySelector('#lol-input');
LookUpSummonerInformation(inputbox.value);
}
</script>
</body>
</html>
Here's a simple example of how you would mix the JS with HTML.
I guess that you are looking for something like this
<html>
<head>
<script>
document.onload = function(){
var inputbox = document.createElement("input");
inputbox.type = "input";
document.body.appendChild(inputbox);
var button = document.createElement("input")
button.type = "button";
button.value = "Press me!";
button.addEventListener("click", function() {
LookUpSummonerInformation(inputbox.value);
});
document.body.appendChild(button);
}
</script>
</head>
<body>
...
</body>
</html>
You can always include JavaScript code using a <script> tag in the body of your html document.
Eg:
<html>
<head>
<!-- Head code here -->
</head>
<body>
<script>
// Your JavaScript code goes here
</script>
<!-- Remaining body code here -->
</body>
<html>
Alternatively
You can link javascript to your index file also using a <script> tag.
Eg:
<html>
<head>
<!-- Head code here -->
</head>
<body>
<script src="path_to_your_js_file"></script>
<!-- Remaining body code here -->
</body>
<html>
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 :-)
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>