Hi New Developer here!
I have a bunch of elements that are constantly being toggled (hiding and showing back and forth)
But I want to make it so if all the elements are hidden then display a starting/welcome message.
I started writing the if condition like this:
((the reason why I wrote if the startingContainer is NOT = to display none is because there is no way to identify for the other elements to be display block since .show() doesnt necessarily make it display block right? I could totally be wrong in saying that.))
Is it possible to write if something is not hidden then take action like the below?
if($('#startingContainer').css('display') != 'none'){
//put some show functions
alert("completed");
}
You may try this approach without using if block.
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
#myDIV {
width: 100%;
text-align: center;
background-color: lightblue;
margin-top: 20px;
}
<p>Click The Button to Toggle Displaying the Text</p>
<button onclick="myFunction()">Try it</button>
<div id="myDIV">
This is the Div Element with Text which will be shown or hidden when you click the Button.
</div>
Related
i started an interactive rating card.
The goal is to choose a number how you would rate and then to submit your answer.
i want to chose a number and then with and eventlistner to change the background of the div element of the choosen number from the current background to another color. So far i have the submit button and recive a thank you message on the card after the button.
this is the html of the 5 number you can choose to rate
<div class="numbers">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
<div class="five">5</div>
</div>
this is the css for example for the first div. All divs have the same css code
.one {
width: 60px;
height: 60px;
color: var(--text-color);
background-color: var(--background-color-body);
border-radius: 50%;
justify-content: center;
align-items: center;
display: flex;
font-weight: 800;
}
I tried with a for Loop to go through all the numbers and by clicking to change the backgroug color
this was the javascript code i tried
addEventListener('click', myFunction);
{
function myFunction() {
var drugi = document.querySelectorAll('.numbers div');
for (i = 0; i <= element.length; i++) {
element[i].style.backgroundColor = 'white';
}
}
}
There are three problems wit your .js code. First, you have the function myFunction in a different scope than the event listener addEventListener('click', myFunction). So to fix it just remove the keys that wrap it. Second, you are using the element before declaring it. And third, the loop will assign the same color to all the element. (Notice a background color white will be not noticed).
To fix it, just use the event delegation pattern on the parent (which is the div element with the class numbers) and check if the target is a div element with the class number and then change the background color.
const numbers = document.querySelector('.numbers')
numbers.addEventListener('click', () => {
const target = event.target
if (target.className === 'numbers') return
target.style.backgroundColor = 'blue'
})
I have a CSS id that both hides visibility and displays: none. When I click the button I would like for it to display. However, the only way I am able to make it work is by removing the display:none. I do not want this because it is an invisible element causing design to be messed up.
Ultimately the goal is to click button, make some elements disappear and some elements appear.
Here is the HTML
<div class="fwork1" id="fwork1">
<a href="#portfolio" onclick="fWork1()">
<img src="assets/img/portfolio/corinthmc/corinthmc_small.png" alt="">
</a>
</div>
<div id="hwork1">
<p>some text</p>
</div>
<div id="fWorkReturn">
<button onclick="fWorkReturn()">Click</button>
</div>
Here is the CSS
#hwork1 {
visibility: hidden;
display: none;
}
Here is the Javascript
function fWork1() {
document.getElementById("fwork2").style.display = "none";
document.getElementById("fwork3").style.display = "none";
document.getElementById("fwork4").style.display = "none";
document.getElementById("hwork1").style.display = "block";
}
function fWorkReturn() {
document.getElementById("fwork1").style.display = "initial";
document.getElementById("fwork2").style.display = "initial";
document.getElementById("fwork3").style.display = "initial";
document.getElementById("fwork4").style.display = "initial";
document.getElementById("hwork1").style.visibility = "hidden";
}
JSFiddle
The best way to handle this would be to add a class when you click on you element. your js would look like this:
function fWork1() {
document.getElementById("fwork2").classList().add('active');
}
and you CSS will look like this:
#hwork1 {
display: none;
}
#hwork1.active {
display: block;
}
Change your code like this -
function hide() {
document.getElementById("fwork2").style.visibility = "";
document.getElementById("fwork3").style.visibility = "";
document.getElementById("fwork4").style.visibility = "";
document.getElementById("hwork1").style.visibility = "";
}
function show() {
document.getElementById("fwork1").style.visibility = "hidden";
document.getElementById("fwork2").style.visibility = "hidden";
document.getElementById("fwork3").style.visibility = "hidden";
document.getElementById("fwork4").style.visibility = "hidden";
document.getElementById("hwork1").style.visibility = "hidden";
}
This is how you can change the visibility of an element with JavaScript. The current code changes the visibility property of some elements when the function is called / button is clicked. It should be fairly straightforward how to apply this in another context.
function hideFourAndShowSix(){
let four = document.getElementById('four');
let six = document.getElementById('six');
six.style.setProperty('visibility', 'visible');
six.style.setProperty('display', 'list-item');
four.style.setProperty('visibility', 'hidden');
}
#six{
visibility: hidden;
display: none;
}
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li id="four">Four</li>
<li>Five</li>
<li id="six">Six</li>
</ul>
<button onclick="hideFourAndShowSix()">Hide no. 4 and show no.6</button>
PS: If you need extra explanation drop in a comment ;).
I have a web page with a div element (named apropos) diplayed. When the mouse is on a menu, I want the div to change to display another div named blog in the exact same spot.
For the moment, the blog div is displayed below the apropos one. The CSS for the two are the same.
An excerpt :
Blog
<div class="apropos"><p>lorem ipsum1</p></div
<div class="blog"><p>lorem ipsum2</p></div>
<script>
function show_blog() {
document.getElementsByClassName("apropos")[0].style.visibility = "hidden";
document.getElementsByClassName("blog")[0].style.visibility = "visible";
}
function hide_blog() {
document.getElementsByClassName("apropos")[0].style.visibility = "visible";
document.getElementsByClassName("blog")[0].style.visibility = "hidden";
}
</script>
You need to use display property, not visibility, because it leaves space like if the element still was there:
function show_blog() {
document.getElementsByClassName("apropos")[0].style.display = "none";
document.getElementsByClassName("blog")[0].style.display = "block";
}
function hide_blog() {
document.getElementsByClassName("apropos")[0].style.display = "block";
document.getElementsByClassName("blog")[0].style.display = "none";
}
As answered, change the visibility to display property.
Just to add another approach to the answer, this could be easily solved with just css. Since the elements are siblings, you could use the sibling selector:
#blogAnchor:hover ~ .blog
#blogAnchor:not(:hover) ~ .apropos{
display: block;
}
#blogAnchor:hover ~ .apropos,
#blogAnchor:not(:hover) ~ .blog{
display: none;
}
<a id="blogAnchor" href="#">Blog</a>
<div class="apropos"><p>lorem ipsum1</p></div>
<div class="blog"><p>lorem ipsum2</p></div>
Basically, I'm trying to make a link that, when pressed, will hide the current body div tag and show another one in its place, unfortunately, when I click the link, the first body div tag still appears. Here is the HTML code:
<div id="body">
<h1>Numbers</h1>
</div>
<div id="body1">
Body 1
</div>
Here is the CSS code:
#body {
height: 500px;
width: 100%;
margin: auto auto;
border: solid medium thick;
}
#body1 {
height: 500px;
width: 100%;
margin: auto auto;
border: solid medium thick;
display: hidden;
}
Here is the JavaScript code:
function changeDiv() {
document.getElementById('body').style.display = "hidden"; // hide body div tag
document.getElementById('body1').style.display = "block"; // show body1 div tag
document.getElementById('body1').innerHTML = "If you can see this, JavaScript function worked"; // display text if JavaScript worked
}
NB: CSS tags are declared in different files
Have you tried
document.getElementById('body').style.display = "none";
instead of
document.getElementById('body').style.display = "hidden";?
just use a jquery event listner , click event.
let the class of the link is lb... i am considering body as a div as you said...
$('.lb').click(function() {
$('#body1').show();
$('#body').hide();
});
Use the following code:
function hide {
document.getElementById('div').style.display = "none";
}
function show {
document.getElementById('div').style.display = "block";
}
You can Hide/Show Div using Js function. sample below
<script>
function showDivAttid(){
if(Your Condition)
{
document.getElementById("attid").style.display = 'inline';
}
else
{
document.getElementById("attid").style.display = 'none';
}
}
</script>
HTML -
Show/Hide this text
Set your HTML as
<div id="body" hidden="">
<h1>Numbers</h1>
</div>
<div id="body1" hidden="hidden">
Body 1
</div>
And now set the javascript as
function changeDiv()
{
document.getElementById('body').hidden = "hidden"; // hide body div tag
document.getElementById('body1').hidden = ""; // show body1 div tag
document.getElementById('body1').innerHTML = "If you can see this, JavaScript function worked";
// display text if JavaScript worked
}
Check, it works.
Consider using jQuery. Life is much easier with:
$('body').hide(); $('body1').show();
try yo write
document.getElementById('id').style.visibility="hidden";
I been researching around looking for how to use tags and javascript to create an area where more information can be seen pertaining to that text you would click on? An excellent example of coding that was given to me, but I already have a layout where the text are set inside div tags.
Just have an onclick that toggles the display value of another div:
jsFiddle
CSS
#toggle {
position: absolute;
left: 20px;
top: 100px;
}
HTML
<div id="toggle">
Show More
</div>
<div id="showMoreText" style="display: none">
more text here
</div>
JS
window.onload = function() {
document.getElementById('toggle').onclick = showMore;
}
function showMore() {
var div = document.getElementById('showMoreText');
var display = div.style.display;
display == "none" ? div.style.display = "block" : div.style.display = "none";
}