I'm a beginner so I'm sorry for a stupid question. The matter is I can't add div "title" inside of div "app" using JS. Help me please.
<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8">
<meta name = "description" content = "Field v.1">
<title> Field v.1 </title>
<style>
.app{
background-color: 'black';
}
.title{
background-color: 'green';
}
</style>
</head>
<body>
<div class = "app">
</div>
<script>
var app = document.querySelector('.app')
var title = document.createElement('div')
title.className = 'title'
title.innerHTML = "BREAKING NEWS"
app.appendChild(title);
</script>
</body>
</html>
The JavaScript works perfectly. Here's the result of your JS:
<div class="app">
<div class="title">BREAKING NEWS</div>
</div>
However, there's a small problem with your CSS. Do not quote CSS values!. It should be:
.app{
background-color: black;
}
.title{
background-color: green;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8">
<meta name = "description" content = "Field v.1">
<title> Field v.1 </title>
<style>
.app{
background-color: black;
}
.title{
background-color: green;
}
</style>
</head>
<body>
<div class = "app">
</div>
<script>
var app = document.querySelector('.app')
var title = document.createElement('div')
title.className = 'title'
title.innerHTML = "BREAKING NEWS"
app.appendChild(title);
</script>
</body>
</html>
There is nothing wrong with your JS code.
You can see your working code in this Codepen:
https://codepen.io/kmpkt/pen/bvYwpm
But there is a error in your CSS code. CSS values may not be quoted:
background-color: black;
Related
so I’m trying to make a button that copy’s the paragraph tag with the ID of “n” onto the clipboard, but I keep getting errors saying that select is not a function, and other things are not a function, what am I doing wrong?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=320, initial-scale=1">
<meta charset="utf-8">
<style>
body, html {
min-width: 100%;
min-height: 100%;
margin: 0;
padding: 0;
font: Arial 14px;
}
</style>
<script>
function n() {
var ntext = document.getElementById("n");
ntext.select();
ntext.setSelectionRange(0, 99999);
document.execCommand("copy");
alert("could be copied")
}
</script>
</head>
<body>
<input>
<button onclick="n()">
Click
</button>
<p id="n">
ee
</p>
</body>
</html>
That only works on input fields. For you, since you are copying from an paragraph, you can try this:
<!DOCTYPE html>
<html>
<body>
<script>
function CopyToClipboard(id){
var r = document.createRange();
r.selectNode(document.getElementById(id));
window.getSelection().removeAllRanges();
window.getSelection().addRange(r);
document.execCommand('copy');
window.getSelection().removeAllRanges();
}
</script>
<p id="sample">Hello World</p>
Copy Text
</body>
</html>
You can just edit this now to your preference.
Source:
https://edupala.com/javascript-clipboard/
This question already has answers here:
css javascript style sheet disabled?
(3 answers)
Closed 4 years ago.
I have an question about modify the tag type attribute problem. In my case, I want to dynamicly change the type to make it work or disabled.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style r = "1" type = "text/css">
h1 {
font-size: 20px;
}
</style>
<style r = "2" type = "not work">
h1 {
font-size: 40px;
}
</style>
</head>
<body>
<script>
var style1 = document.querySelector('[r="1"]')
var style2 = document.querySelector('[r="2"]')
</script>
<h1>this text can be either 20px or 40px</h1>
<input type="button" value="make text 20px" onclick = "style1.type='text/css';style2.type='not work'">
<input type="button" value="make text 40px" onclick = "style2.type='text/css';style1.type='not work'">
</body>
</html>
So here's the example : click me
It works on chrome, but nor work in ie11, safari. Anybody can help ? Thanks a lot.
Addition: What i am doing is to change page style depends on some condition, say: language. In some reason I cant use mvvm framework.
That's not how you do it, actually. It's bad practice to change styles this way. It's better to change just one element style and not whole page style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type = "text/css">
h1 {
font-size: 20px;
}
</style>
</head>
<body>
<script>
function changeStyle(fontSize) {
var heading = document.querySelector('h1')
heading.style.fontSize = fontSize;
}
</script>
<h1>this text can be either 20px or 40px</h1>
<input type="button" value="make text 20px" onclick = "changeStyle('20px')">
<input type="button" value="make text 40px" onclick = "changeStyle('40px')">
</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.
Following is the html-javascript code for setting the background image and background image.
<html>
<link rel="stylesheet" type="text/css" href="try2.css">
<body>
Choose the color<br>
<div class="foo" id="#13b4ff" style="background-color:#13b4ff;"></div>
<div class="foo" id="ab3fdd" style="background-color:#ab3fdd;"></div>
<div class="foo" id="ae163e" style="background-color:#ae163e;"></div>
<br><br>
<div id="myframe1" style="padding:5px;width:300px;height:400px;border:1px solid black;">
<p><img src="img-thing.png" style="width:200px;height:200px;"/><p>
</div>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"> </script>
<script type="text/javascript">
$(document).ready(function(){
$('.foo').click(function(){
var str1 = $(this).attr('id');
var myframe = document.getElementById('myframe1');
myframe.style.backgroundColor=str1;
myframe.style.width=300;
myframe.style.height=400;
});
});
</script>
<div><input type='file' onchange="readURL(this);" />
<img id="blah"/></div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#myframe1').css({
'background':'url('+e.target.result +')',
'background-size':'310px 410px'
});
};
reader.readAsDataURL(input.files[0]);//To display images uncomment this
}
}
</script>
</body>
</html>
The CSS FILE FOR COLORS IS(just in case you need to look at that as well)
.foo {
float: left;
width: 20px;
height: 20px;
margin: 5px 5px 5px 5px;
border-width: 1px;
border-style: solid;
border-color: rgba(0,0,0,.2);
}
Now the problem is:
I want that user may click upload image option first and upload the image as a background. But once that is done it not allowing user to se color as a background. How to fix that? On the contrary if color is choosen and then image, image can override as background.I want that both must be able to override each other. For convenience I also the fiddle link : here Also one more issue in the fiddle, other colors are not showing up, but they are working in my html file.
First of all correct your id name of class foo . use # in all ids ok
next empty the background of the div while on clicking of color div by
myframe.style.background="";
: Here is your corrected working code now
I think you can achieve by adopting two DIVs, one of them is used to render background images and the other render background color.
By changing 'z-index' of DIV, you can display COLOR at top or bottom.
Hope this can help you .
The following code should work under mainstream browser.
Take a try.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<style>
#DivBgColor,#DivBgImage{
position:absolute;
left:100px;
top:100px;
width:300px;
height:300px;
}
#DivBgColor{background-color:red;z-index:2}
#DivBgImage{background-image: url(https://s.yimg.com/rz/l/yahoo_en-US_f_p_142x37.png);background-repeat: no-repeat;z-index:4}
</style>
<script language=javascript>
function makeColorAbove(){
var objColor = document.getElementById("DivBgColor");
var objImage = document.getElementById("DivBgImage");
objColor.style.zIndex=2;
objImage.style.zIndex=1;
}
function makeImageAbove(){
var objColor = document.getElementById("DivBgColor");
var objImage = document.getElementById("DivBgImage");
objColor.style.zIndex=1;
objImage.style.zIndex=2;
}
</script>
<body>
<div id="DivBgColor" ></div>
<div id="DivBgImage"></div>
<input type=button value="makeColorAbove" onclick="makeColorAbove()">
<input type=button value="makeImageAbove" onclick="makeImageAbove()">
</body>
</html>
Am using the below script to change the color of the script but showing 'font color="red">Hello world /font> like this.Is any possible way to change the alert text color..
<html>
<head>
<title>JavaScript String fontcolor() Method</title>
</head>
<body>
<script type="text/javascript">
var str = new String("Hello world");
alert(str.fontcolor( "red" ));
</script>
</body>
</html>
No. alert() accepts a string and renders it using a native widget. There is no provision to style it.
The closest you could get would be to modify the HTML document via the DOM to display the message instead of using an alert().
You can use JQuery to resolve your Problem
<html>
<head>
<meta charset="utf-8" />
<title>JavaScript String fontcolor() Method</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery- ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#dialog-message" ).dialog({
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}});
});
</script>
</head>
<body>
<div id="dialog-message" title="My Dialog Alternative">
<p style='color:red'> Hello world </p>
</div>
</body>
</html>
Hope this help :
<!doctype html>
<html>
<head>
<title>JavaScript String fontcolor() Method</title>
<style>
#alertoverlay{display: none;
opacity: .8;
position: fixed;
top: 0px;
left: 0px;
background: #FFF;
width: 100%;}
#alertbox{display: none;
position: fixed;
background: #000;
border:7px dotted #12f200;
border-radius:10px;
font-size:20px;}
#alertbox > div > #alertboxhead{background:#222; padding:10px;color:#FFF;}
#alertbox > div > #alertboxbody{ background:#111; padding:40px;color:red; }
#alertbox > div > #alertboxfoot{ background: #111; padding:10px; text-align:right; }
</style><!-- remove padding for normal text alert -->
<script>
function CustomAlert(){
this.on = function(alert){
var winW = window.innerWidth;
var winH = window.innerHeight;
alertoverlay.style.display = "block";
alertoverlay.style.height = window.innerHeight+"px";
alertbox.style.left = (window.innerWidth/3.5)+"pt";
alertbox.style.right = (window.innerWidth/3.5)+"pt"; // remove this if you don't want to have your alertbox to have a standard size but after you remove modify this line : alertbox.style.left=(window.inner.Width/4);
alertbox.style.top = (window.innerHeight/10)+"pt";
alertbox.style.display = "block";
document.getElementById('alertboxhead').innerHTML = "JavaScript String fontcolor() Method :";
document.getElementById('alertboxbody').innerHTML = alert;
document.getElementById('alertboxfoot').innerHTML = '<button onclick="Alert.off()">OK</button>';
}
this.off = function(){
document.getElementById('alertbox').style.display = "none";
document.getElementById('alertoverlay').style.display = "none";
}
}
var Alert = new CustomAlert();
</script>
</head>
<body bgcolor="black">
<div id="alertoverlay"></div>
<div id="alertbox">
<div>
<div id="alertboxhead"></div>
<div id="alertboxbody"></div>
<div id="alertboxfoot"></div>
</div>
</div>
<script>Alert.on("Hello World!");</script>
</body>
</html>
The concept is taken from this : http://www.developphp.com/video/JavaScript/Custom-Alert-Box-Programming-Tutorial