I have been learning Javascript and I'm a little confused as to why this doesn't work. I'd like it so if you click the div, it creates a red border around it:
JSFiddle link
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Generation X</title>
</head>
<body>
<script src="test.js"></script>
<div id="clickHere" onclick="run()">
<p>Hello</p>
</div>
</body>
</html>
Javascript:
function run() {
document.getElementById("clickHere").style.border = thick solid red;
alert("Changed");
}
make it ..updated fiddle (you need to wrap it in the head tag)
function run(thisObj) {
thisObj.style.border = "1px solid red"; //or "1px solid #ff000"
alert("Changed");
}
also, rather than getting the reference to element again, simply pass the reference during the time of invocation.
So, instead of putting an onClick on div, use a addEventListener should be better.
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Event_attributes
https://jsfiddle.net/5jsbhbhu/5/
var run = function() {
document.getElementById("clickHere").style.borderColor = "red";
document.getElementById("clickHere").style.borderWidth = "1px";
document.getElementById("clickHere").style.borderStyle = "solid";
alert("Changed");
};
var node = document.getElementById('clickHere');
node.addEventListener('click', run);
Related
I am trying to make another div right under the existing div in the HTML
<html>
<head>
<title>
Media Player
</title>
<script src="script.js"></script>
</head>
<script>
makeOscarPlayer(document.getElementById("my-video"))
</script>
<body>
<div class="my-player">
Hello!
</div>
</body>
</html>
function makeOscarPlayer(){
var div = document.createElement("div");
div.innerHTML = `
hello
`
}
can someone explain to me what I am doing wrong? I am a self-taught developer sorry if my code is not perfectly organized still learning
You are calling the makeOscarPlayer() function before you are creating it.
You need to wrap the makeOscarPlayer() function declaration in a script tag.
You are passing in document.getElementById("my-video") as a parameter to makeOscarPlayer(), but there is no HTML element with an id of 'my-video'. You are giving the function a parameter of null, while the function declaration has no parameters.
You need to tell the script where to put the new element. To do that, you grab an existing element and use parentNode and insertBefore
Here is a barebones version that I got working for your reference:
<html>
<head>
<title>
Media Player
</title>
</head>
<script>
</script>
<body>
<div id="my-player">
Hello!
</div>
</body>
</html>
<script type="text/javascript">
function makeOscarPlayer(){
var div = document.createElement("div");
div.innerHTML = `hello`;
// This grabs the element that you want to create a new element by
var existingDiv = document.getElementById("my-player");
// This tells the script where to put the new element
existingDiv.parentNode.insertBefore( div, existingDiv.nextSibling);
}
// Must be called in the same script block or after the script holding the function declaration is loaded
makeOscarPlayer();
</script>
For more information on how parentNode and insertBefore work, see this Stack Overflow question
You need to append that new element to a specific parent, in your case to my-video.
The function appendChild appends the new element to a parent element.
function makeOscarPlayer(parent) {
var div = document.createElement("div");
div.innerHTML = 'Hello from Ele';
parent.appendChild(div);
}
makeOscarPlayer(document.getElementById("my-video"))
#my-player {
border: 1px dashed green;
padding: 5px;
margin: 5px;
width: 300px;
background-color: #f1f1f1
}
#my-video div {
border: 1px dashed green;
padding: 5px;
margin: 5px;
width: 200px;
font-weight: 700;
}
<div id="my-player">
Hello!
<div id="my-video">
</div>
</div>
It's a good start, but you're calling the function incorrectly and your function isn't adding anything to the page.
we use appendChild to add a node to the page.
In your function you create and add text to a div, but you don't return the node you made(and also you didn't close your line of code with a semi-colon so I added that too) but this should work:
<html>
<head>
<title>
Media Player
</title>
</head>
<body>
<div class="my-player">
Hello!
</div>
<script>
function makeOscarPlayer() {
var div = document.createElement("div");
div.innerHTML = `hello`;
return div;
}
document.getElementById("my-video").appendChild(makeOscarPlayer())
</script>
</body>
</html>
function makeOscarPlayer() {
var div = document.createElement("div");
div.innerHTML = `hello`;
return div;
}
document.getElementById("my-video").appendChild(makeOscarPlayer())
<html>
<head>
<title>
Media Player
</title>
</head>
<body>
<!-- added my-video div -->
<div id="my-video"></div>
<div class="my-player">
Hello!
</div>
</body>
</html>
Im copying this from a book (..so it "should" work), i cant get this function to work, it might be a duplicate but i searched for an answer and cant get it working.
"Uncaught TypeError: Cannot set property 'borderColor' of undefined"
It might be something simple but the to i believe is the problem i tried setting it to an array and object but i dont really understand, any solution with simple explanation would be much appreciated.
function changeBorder(element, to){
element.style.borderColor = to;
}
var contentDiv = document.getElementById('color');
contentDiv.onmouseover = function(){
changeBorder('red');
};
contentDiv.onmouseout = function(){
changeBorder('black');
};
.box{
border: 1px solid red;
background-color:pink;
padding: 10px;
}
.row {
border: 1px solid #000;
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html/js; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div class="row" id="color">
<div class="element">1</div>
</div>
</body>
</html>
I just want to remove the error message and get the function to do something.
You need to set the this and change your functions like this:
contentDiv.onmouseover = function(){
changeBorder(this, 'red');
};
contentDiv.onmouseout = function(){
changeBorder(this, 'black');
};
Without the keyword this, it's not going to be found. Remember that in your function you are sharing the element:
function changeBorder(element, to){
element.style.borderColor = to;
}
Your changeBorder method expects 2 arguments but you always call it using only one.
Try this:
changeBorder(contentDiv, '[color]');
Also, this may not work if the
var contentDiv = document.getElementById('color');
statement is executed before the DOM is ready.
changeBorder('red') -> the var element inside the method is set with a string ('red'). A string has not style property, so element.style is undefined and you can't use properties( like borderColor ) of undefined objects
You have to modify the code a bit. Please check code below:
<html>
<head>
<style>
.box{
border: 1px solid red;
background-color:pink;
padding: 10px;
}
.row {
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="row" id="color">
<div class="element">1</div>
</div>
<script type="text/javascript">
function changeBorder(element, to){
element.style.borderColor = to;
}
var contentDiv = document.getElementById('color');
alert(contentDiv);
contentDiv.onmouseover = function(){
changeBorder(contentDiv,'red');
};
contentDiv.onmouseout = function(){
changeBorder(contentDiv, 'black');
};
</script>
</body>
</html>
I`m learn the javascript code from the net resource，but I met some problem,
my code isnt working and I am getting an'Uncaught TypeError...'.I hava try many way to resovle the error,but it cannot work.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>win下载 </title>
<style>
div {width: 200px;height: 200px;float: left;
border: 1px solid black;margin: 10px}
</style>
<script>
window.onload=function () {
var aDiv = document.getElementById('div');
alert(aDiv.length);
// aDiv[0].style.background = 'red';
};
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
In your example, you are using document.getElementById('div'). There are no elements with the ID div.
I'm assuming you are looking for document.getElementsByTagName('div'), which will return all <div> elements.
window.onload = function() {
var divElements = document.getElementByTagName('div');
alert(divElements.length); // 4
divElements[0].style.background = 'red'; // set the first div element's background to red
};
var aDiv = document.getElementById('div');
should be
var aDiv = document.getElementsByTagName('div');
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>win下载 </title>
<style>
div {width: 200px;height: 200px;float: left;
border: 1px solid black;margin: 10px}
</style>
<script>
window.onload=function () {
var aDiv = document.getElementsByTagName('div');
alert(aDiv.length);
// aDiv[0].style.background = 'red';
};
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
(note: it's best to have your JavaScript separate from your html)
Id is an attribute that you give to any HTML tag. eg. <div id="myFirstDiv">. It should be unique in the document, and should generally be a meaningful name.
"div" is a tag name, so you could get all your divs in your sample with getElementsByTagName("div"); and then loop through them.
This is my javascript for replacing some text:
document.body.innerHTML = document.body.innerHTML.replace(/Sometext/g, 'difference');
Ho do I change color, font-size, font and such?
I need to link my script like this, can't use { otherwise:
<script>$(document).ready($.getScript("url"));</script>
I though something like this would work:
window.onload = function() {
document.body.innerHTML =
document.body.innerHTML.replace(/Deckling/g, result);
}
var str = "The Liberator";
var result = str.fontcolor("Red").italics().fontsize(6);
result.style.fontFamily = "Harrington";
Any help? (first post and very limited Knowledge)
You can wrap you text in a div or span tag, select it in JS applying a class.
The class will contains the style for your text.
Just a quick example in vanilla javaScript (no jquery):
http://jsbin.com/yufiteseme/1/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.a {
color:red;
font-style: italic;
font-size: 6px;
{
</style>
<script>
function changeColor(){
document.getElementById('text').classList.add('a');
}
</script>
</head>
<body onload="changeColor()">
<div id="text">
Test for example
</div>
</body>
</html>
You can change style of an html element using javascript, put your script below the element.
The following example changes the style of a 'p' element using javascript:
<!DOCTYPE html>
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").style.color = "red";
document.getElementById("p1").style.fontFamily = "Arial";
document.getElementById("p1").style.fontSize = "larger";
</script>
</body>
</html>
You can also change style of an html element using jquery.
The following example changes the style of a 'p' element using jquery:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$('#p1').ready(function(){
$('#p1').css({"color": "green"}).css({"fontFamily": "Arial"}).css({"fontSize": "24px"});
});
</script>
</head>
<body>
<p id="p1">Hello World!</p>
</body>
</html>
That will not work:
var result = str.fontcolor("Red").italics().fontsize(6);.
You need to add css to change the surface.Add this to your header:
.textstyle{
font-size:16px;
font-family:Harrington;
}
</style>
And add this to your window.onload:$('body').addClass('textstyle');
I'd like to display a div on a webpage when a user clicks on a button.
Does someone know how to do this ?
My code, so far, is :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso 8859-1" />
</head>
<body>
<input id="text" type="text" size="60" value="Type your text here" />
<input type="button" value="When typing whatever text display the div balise on the page" onclick="check();" />
<script type="text/javascript">
function check() {
//Display my div balise named level0;
}
</script>
</body>
</html>
Thanks,
Bruno
EDIT: All my code (I've erased it because it was too long and not very clear)
You can use document.createElement("div") to actually make the div. Then you can populate the div using innerHTML for the text. After that, add it to the body using appendChild. All told, it can look like this:
function check() {
var div = document.createElement("div");
div.innerHTML = document.getElementById("text").value;
document.body.appendChild(div);
}
This will add a div every time the button is pressed. If you want to update the div each time instead, you can declare the div variable outside the function:
var div;
function check() {
if (!div) {
div = document.createElement("div");
document.body.appendChild(div);
}
div.innerHTML = document.getElementById("text").value;
}
If you have the div already in the page with an id of "level0", try:
function check() {
var div = document.getElementById("level0");
div.innerHTML = document.getElementById("text").value;
}
A quick search on google gave me this example:
Demo of hide/show div
The source-code for that example is:
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<html>
<head>
<title>Demo of Show hide div layer onclick of buttons</title>
<META NAME="DESCRIPTION" CONTENT="Displaying and hiding div layers through button clicks">
<META NAME="KEYWORDS" CONTENT="Show layer, hide layer, display div, hide div, button on click, button on click event, div property, div style set">
<style type="text/css">
div {
position: absolute;
left: 250px;
top: 200px;
background-color: #f1f1f1;
width: 280px;
padding: 10px;
color: black;
border: #0000cc 2px dashed;
display: none;
}
</style>
<script language="JavaScript">
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}
</script>
</head>
<body>
<input type=button name=type value='Show Layer' onclick="setVisibility('sub3', 'inline');";><input type=button name=type value='Hide Layer' onclick="setVisibility('sub3', 'none');";>
<div id="sub3">Message Box</div>
<br><br>
</body>
</html>
Paste this code somewhere in your body
<div id="myDiv" style="display:none">
Hello, I am a div
</div>
Add this snippet into your check() function to display the otherwise-hidden content.
document.getElementById("myDiv").style.display = "block";
You could also change the div content programmatically thus:
document.getElementById("myDiv").innerHTML = "Breakfast time";
... would change the text to 'Breakfast time'.
You might want to look into jquery, it'll make your life 100 times easier.
Jquery is a javascript library (script) that you include and it allows you to manipulate the DOM very easily.
Start by adding the latest Jquery to your head which will allow you to use something like $(document).ready( )
The function inside .ready( fn ) is a callback function; it get called when the document is ready.
$("#lnkClick") is a selector (http://api.jquery.com/category/selectors/)
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready( function() {
$("#lnkClick").click( function() {
$("#level0").attr("style", "display: block;width: 100px; height: 100px; border: solid 1px blue;");
});
});
</script>
</head>
<body>
<div id="level0" style="display:none;">
</div>
Click me
</body>
</html>
Of course this code can be made cleaner. You want to check: http://api.jquery.com/click/
There are plenty of examples.
Best of luck with Jquery!
you really should be using jquery , there's a little bit of a learning curve but once you get it, developing web apps is much easier.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script>
$(document).ready(function() {
$("#show_div_button").click(function() {
$("#div_to_show").show();
return false;
});
});
</script>
</head>
<body>
Click Me to Show the Div
<div style="display:none" id="div_to_show">I will be shown when the link is clicked</div>
</body>
</html>