I have this code:
<script>
radius.style.setproperty('display');
</script>
<style>
.radius{
display: none;
}
</style>
<body>
<p id="radius"> Enter the radius</p>
</body>
What I intend to do here is that, by default, the paragraph has display=none. I want to display this paragraph through JS when some specific condition is met. But the problem is that using above code, I am not able to accomplish what I want. Please suggest what should have been done instead?
at the first you should get dom, after that change style attr. like this
for example:
<html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color = "blue";
</script>
</body>
</html>
Try
<html>
<body>
<p id="radius"> Enter the radius</p>
<script>
let radius = document.getElementById("radius");
if(condition == true){
radius.style.display = "block";
}else{
radius.style.display = "none";
}
</script>
</body>
</html>
You can set element style in javascript
element.style.cssPropertyInCamelCase = 'value'
Example
const element = document.getElementById('id')
element.style.display = 'none'
Related
I have a paragraph tag with a class of "price" which I want to add a span tag inside using either Javascript, Jquery or both.
E.g
BEFORE: <p class="price"></p>
AFTER: <p class="price"><span class="whatever">Sale</span></p>
How can I achieve this?
You can do as follows:
$("p.price").append($(`<span class="whatever">Sale</span>`));
This is plain JavaScript code
function addSpan() {
var price = document.getElementsByClassName('price')[0];
var span = document.createElement('span');
span.classList.add('whatever');
span.innerText = 'Sale';
price.appendChild(span);
}
addSpan();
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p class="price"></p>
</body>
</html>
You can make the method more generic by passing parameters as well.
To add it within the first .price element, without jQuery:
document.querySelector(".price").insertAdjacentHTML(
"beforeend",
"<span class='whatever'></span>"
);
With jQuery:
$(".price").first().append("<span class='whatever'></span>");
If you know there's only one, you can leave out .first().
if need vanilla javascript:
var lcs_els = document.getElementsByClassName('price');
for(var key in lcs_els){
lcs_els[key].innerHTML = '<span class="whatever">Sale</span>';
}
<p class="price"></p>
if need jquery:
$('.price').html('<span class="whatever">Sale</span>');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="price"></p>
Jquery variant 2 if need manipulate of span:
var span = $('<span/>').attr('class', 'whatever').html('Sale');
$('.price').append(span);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="price"></p>
I created this code so my page would be hidden until it finishes loading. But my code doesn't work as I expected. I expected this to hide the BODY until the OnLoad event was triggered.
However, instead, it just stays hidden.
Any help would be appreciated, if there is maybe another, better method of hiding the BODY until it finishes loading, or what's wrong with this one.
Here's what I've tried so far:
function unveil() {
var thebod = document.getElementById("testbody");
thebod.STYLE = "display: block;"
}
<HTML>
<HEAD>
<TITLE>HELLO</TITLE>
</HEAD>
<BODY ID="testbody" ONLOAD="unveil();" STYLE="display: none;">
<div align="CENTER">
HELLO WORLD!
</div>
</BODY>
</HTML>
The DOMContentLoaded event of the window object can do this. But, don't hide the body, hide a wrapper instead. And, when you set the style, make sure to set the style of a CSS property, not the style object itself.
window.addEventListener("DOMContentLoaded", function(){
document.getElementById("wrapper").style.display = "block";
});
#wrapper { text-align:center; background:#e0e0e0; display:none;}
<HTML>
<HEAD>
<TITLE>HELLO</TITLE>
</HEAD>
<BODY>
<div id="wrapper">
HELLO WORLD!
<!-- The following is only added to create a delay in the
parsing of the document -->
<script>
for(var i = 0; i < 100000000; ++i){ var x = i / 3.14; }
</script>
</div>
</BODY>
</HTML>
You're not setting the elements 'style' correctly:
You can either do:
element.style.display = "block";
Or
element.setAttribute('style', "display: block");
Here is a working example:
function unveil() {
var thebod = document.getElementById("testbody");
thebod.style.display = "block";
}
<HTML>
<HEAD>
<TITLE>HELLO</TITLE>
</HEAD>
<BODY ID="testbody" ONLOAD="unveil();" STYLE="display: none;">
<div align="CENTER">
HELLO WORLD!
</div>
</BODY>
</HTML>
Your issue is here:
thebod.STYLE = "display: block;"
which should read:
thebod.style.display = 'block';
Here is the complete approach (using unobtrusive javascript):
var body = document.getElementsByTagName('body')[0];
function unveil() {
body.style.display = 'block';
}
window.addEventListener('load', unveil, false);
body {
display: none;
}
div {
text-align: center;
}
<div>HELLO WORLD!</div>
<HTML>
<HEAD>
<TITLE>HELLO</TITLE>
</HEAD>
<BODY ID="testbody" onload="testbody.style.display = '';" style="display: none;">
<div align="CENTER">
HELLO WORLD!
</div>
</BODY>
</HTML>
What I want to do is, when I click on button then one div should disappear and another should appear and if i click on the same button one more time, then first one should appear and second one should disappear. This would go until I click on the button.
What I tried:
JavaScript:
function change_image(){
var flag = true;
if(flag){
document.getElementById('speaker_main_div_with_rounded_image').style.display="none";
document.getElementById('speaker_main_div_with_square_image').style.display="block";
flag = false;
} else {
document.getElementById('speaker_main_div_with_rounded_image').style.display="block";
document.getElementById('speaker_main_div_with_square_image').style.display="none";
flag = true;
}
}
HTML:
<input type="button" value="Click Here to get another image" onClick="change_image(this)">
Any help would be grateful.
Thank You.
Your flag variable is local, and its value is always the same when function is called. Initialize it with:
var flag = document.getElementById('speaker_main_div_with_rounded_image').style.display !== 'none';
This is my solution using jQuery Library .
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#div1").toggle();
$("#div2").toggle();
});
});
</script>
<style>
.hide{
display:none;
}
</style>
</head>
<body>
<button type="button" id="btn1">Toggle</button>
<div id ="div1">
I am div 1
</div>
<div id ="div2" class="hide">
I am div 2
</div>
</body>
</html>
Just started learning HTML, and I came across a simple problem which I couldn't find the answer to. I know that I can use the line <img src ="link to src"/> to display an image. I also know I can used the <script> </script> tags to hold javascript code. My question is, how can I only display the img if a variable in my script is equal to true?
<!DOCTYPE html>
<HTML>
<TITLE>Img Tester</TITLE>
<BODY>
<h1>Image:</h1>
<img src ="link to src"/> <!--only display this if the variable c == true in the script-->
</BODY>
<SCRIPT>
var c = confirm("Display Image?");
if(c== true) {
//do something here that displays image?
}
</SCRIPT>
</HTML>
First, I'd set the default style of the image with id="img1" to hidden. Both display: none and visibility: hidden are similar however visibility takes up space.
Please take a look at the snippet below. If you press ok, you will see the image of the dragon. If you press cancel, it won't appear.
var image = document.getElementById("img1");
var c = confirm("Display Image?");
if (c) {
image.style.display = 'block';
}
#img1 {
display: none;
height: 200px;
width: 200px;
}
<h1>Image:</h1>
<img id="img1" src="http://cdn.playbuzz.com/cdn/df02649d-894e-4b82-94da-cd10dd2449a0/7833c7a7-6301-446b-8fbc-ed948aaaa0be.jpg"/>
A few pointers
Tag names should be in lowercase, not uppercase
Instead of if(c == true), use the equivalent if (c)
Give an id to that image and hide the element with that id
<!DOCTYPE html>
<HTML>
<TITLE>Img Tester</TITLE>
<BODY>
<h1>Image:</h1>
<img style="display:none" id="img1" src ="link to src"/> <!--only display this if the variable c == true in the script-->
</BODY>
<SCRIPT>
var c = confirm("Display Image?");
if(c== true) {
document.getElementById( "img1" ).style.display = "inline";
}
</SCRIPT>
</HTML>
Observe two changes in the code
Id attribute has been given to the image element and its display property is set to none
In the if section, a line has been added to hide the image using that id
document.getElementById( "img1" ).style.display = "inline";
by setting its display property to 'inline'.
Use div for this as following:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
<div id = "display">
<h1>Image:</h1>
<img src ="link to src"/>
</div>
<script>
document.getElementById('display').style.visibility = 'hidden';
var c = confirm("Display Image?");
if(c== true) {
//do something here that displays image?
document.getElementById('display').style.visibility = 'visible';
}
</script>
</body>
</html>
display: none will download the image even if the user clicks cancel. Here's another approach to download the image ONLY if the user clicks OK
<h1>Image:</h1>
<div id="myImg"></div>
</BODY>
<SCRIPT>
var c = confirm("Display Image?");
if(c== true) {
document.getElementById("myImg").innerHTML='<img src="img_src" />';
}
</SCRIPT>
You can replace the div with p or whatever you like.
Use this code
<HTML>
<TITLE>Img Tester</TITLE>
<BODY>
<h1>Image:</h1>
<img id="img"/>
</BODY>
<SCRIPT>
var c = confirm("Display Image?");
if(c== true) {
document.getElementById("img").setAttribute("src","1.jpg");
}
</SCRIPT>
</HTML>
I'd use classes for this task...
<img id="image-1" class="myimage" />
In your styles you should hide the image
.myimage {
display: none;
}
Also you need another class to show your image
.myimage-show {
display: block;
}
Now you need set myimage-show class to show your image
<script>
var c = confirm("Display Image?");
if(c== true) {
document.getElementById('image-1').classList.add('myimage-show');
}
</script>
(I know I can do it directly with input style, but I have other intentions)
I tried several ways
<script> document.getElementById('myTextBox').style.backgroundColor = 'red'; </script>
<script> document.form1.myTextBox.style.backgroundColor = 'red'; </script>
I tried putting it on head, on body. I don't know what else to do
use onload
<body onload="style()">
And put your code in a function, at the bottom of the body
<script type="text/javascript">
function style(){
document.getElementById('myTextBox').style.backgroundColor = 'red';
}
</script>
</body>
You need to tell the browser when to execute that statement in your case.
Putting it as a function call in the body's onload will do.
Look at this example
<html>
<head>
<script>
function FooBarFunction()
{
document.getElementById('foo').style.backgroundColor = 'red';
}
</script>
</head>
<body onload="FooBarFunction()">
<input type="textbox" id="foo">
</body>
</html>
Try this..
$(function(){
$("#myTextBox").css("background","red");
});
Example : http://jsfiddle.net/8BnrF/
you can do it by put your code in tag of body
<body >
<script> document.getElementById('myTextBox').style.backgroundColor = 'red'; </script>
simply put your scripts before this
e.g ...
<script> document.form1.myTextBox.style.backgroundColor = 'red'; </script>
</body>
</html>
or edit your script like this
<script>window.onload =function(){ document.getElementById('myTextBox').style.backgroundColor = 'red';
}
</script>