JavaScript style div based on another div's style [help] - javascript

why does this not work? I want to click a button to show the "nav", and then if the "nav" is blocked the "move" will be text-aligned to center.
I know I could just textAlign it the "move" with the same button, but that is not what I'm looking for.
const btn = document.getElementById('btn');
const nav = document.getElementById('nav');
const move = document.getElementById('move');
btn.addEventListener('click', () => {
if (nav.style.display === "none") {
nav.style.display = "block";
} else {
nav.style.display = "none";
}
});
if (nav.style.display === "block") {
move.style.textAlign = "center";
}
#nav {
background-color: lightblue;
display: none;
}
li {
display: inline;
}
<div id="nav">
<li>one</li>
<li>two</li>
<li>three</li>
</div>
<div id="move">
<h4>Hello</h4>
</div>
<button id="btn">change</button>

const btn = document.getElementById('btn');
const nav = document.getElementById('nav');
const move = document.getElementById('move');
const btn = document.getElementById('btn');
const nav = document.getElementById('nav');
const move = document.getElementById('move');
btn.addEventListener('click', () => {
if (nav.style.display === "none") {
nav.style.display = "block";
move.style.textAlign = "center";
} else {
nav.style.display = "none";
}
});

Try to use, in this way you force the text inside #nav to be aligned in the center.
#nav {
background-color: lightblue;
display: none;
text-align: center;
}
If you need to change the inline style dynamically based on some condition in javascript you could consider looking at the inline style of your dom node using style property ex: nav.style.display
A simple example:
if (nav.style.display === "none") {
nav.style.display = "block";
move.style.textAlign = "center";
} else {
nav.style.display = "none";
}
More info on style property can be found here.

Related

How would I make this function repeat continuously?

I'm making a small website and I'm trying to make two elements repeatedly hide and show so it'll look like it's switching between the two. I have a draft code that would do that but I'm not sure how to make it loop.
function MyDraft(){
var x = document.getElementById("one");
var y = document.getElementById("two");
if (y.style.display === "none"){
x.style.display = "none";
y.style.display = "block";
}
else {
x.style.display = "block";
y.style.display = "none";
}
}
If you use classes you can toggle an element having an hidden class (which sets visibility: hidden). Then just add the code that does the toggling for the elements inside setInterval.
// Cache the elements
const boxes = document.querySelectorAll('.box');
// Iterate over the elements toggling their
// `hidden` class
setInterval(() => {
boxes.forEach(box => box.classList.toggle('hidden'));
}, 1000);
.box { width: 30px; height: 30px; background-color: lightgreen; }
.hidden { visibility: hidden; }
<div class="box"></div>
<div class="box hidden"></div>
Just use setInterval
function MyDraft(){
var x = document.getElementById("one");
var y = document.getElementById("two");
if (y.style.display === "none"){
x.style.display = "none";
y.style.display = "block";
}
else {
x.style.display = "block";
y.style.display = "none";
}
}
var interval = setInterval(myDraft, [timeInMilliseconds]);
Save the interval variable somewhere so you can later call clearInterval if you want

How to automate a JS script to keeping repeating a instruction?

My goal is to make a script click continuously on this two button without need to call it manually, my script have the ability to click on the button, but I don't know
how to automate the action, what I'm trying to do is keeping clicking with no number limit of clicks.
The script I used to click on the button
let buttonTags = document.getElementsByTagName("button");
let followButton = "Follow";
let unFollowButton = "Unfollow";
let found;
for (let i = 0; i < buttonTags.length; i++) {
if (buttonTags[i].textContent == followButton || unFollowButton) {
found = buttonTags[i];
break;
}
}
found.click()
This is the test, I used two divs intentionally.
HTML
<div id="hidde">
<button onclick="myFunction()">Follow</button>
</div>
<div id="hidden">
<button onclick="myFunction()">Unfollow</button>
</div>
CSS
body{
display: flex;
}
div{
border: #000 solid 1px;
padding: 20px;
}
#hidden {
display: none;
}
Javascript
function myFunction() {
let y = document.getElementById("hidde");
let x = document.getElementById("hidden");
if (x.style.display === "none") {
x.style.display = "block";
y.style.display = "none";
} else {
x.style.display = "none";
y.style.display = "block";
}
}
You can programatically trigger a click with .click()
https://www.w3schools.com/jsref/met_html_click.asp
But also your use case perfectly suits a Do/While loop :)

Pairing display: flex with display: block and display: none

I'm using pure JS and flexbox to create grid for my project.
Parts of the project are hidden with display: none at page load, but after clicking the button it should toggle between display none and block.
Sadly this completely either ruins display: flex or does not toggle. Is there any way to make these 2 properties work together?
Here is JSfiddle i put together
https://jsfiddle.net/c3dw0woa/
<div class="container">
<div>Text hello I was hidden</div>
</div>
<button class="dis_legend">Click to display</button>
CSS
.container{
display: flex;
}
JS
var container = document.querySelector('.container');
container.style.display = "none";
var legend_button = document.querySelector('.dis_legend');
var container_displayed = false;
container.style.display = "none";
legend_button.onmousedown = function(){
if(legend_displayed == false){
container.style.display = "block";
container_displayed = true;
} else {
container_displayed.display = "none";
container_displayed = false;
}
}
You an always use display= flex in js, to avoid the problem
I changed a few things in your javascript code
See result:
var container = document.querySelector('.container');
var legend_button = document.querySelector('.dis_legend');
var container_displayed = false;
container.style.display = "none";
legend_button.onmousedown = function() {
if (container_displayed == false) {
container.style.display = "flex";
container_displayed = true;
} else {
container.style.display = "none";
container_displayed = false;
}
}
.container {
display: flex;
}
<div class="container">
<div>Text hello I was hidden</div>
</div>
<button class="dis_legend">Click to display</button>
Chiller's solution should work, but here's another option in case you want to do it with an event listener:
var container = document.querySelector('.container');
container.style.display = "none";
var legend_button = document.querySelector('.dis_legend');
var container_displayed = false;
container.style.display = "none";
legend_button.addEventListener('click', function(){
if (container.style.display == "none"){
container.style.display = "block";
} else {
container.style.display = "none";
}
})

Changing font size and modifying Javascript Show/Hide Toggle

I'm a total beginner in Javascript, and I came across this script for a show/hide toggle:
<script language="javascript">
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "show";
}
else {
ele.style.display = "block";
text.innerHTML = "hide";
}
}
</script>
I would like to change the font size of the "show" and "hide" in this code. Seems like a really easy task, but I've looked everywhere and can't find an answer.
Also another question, how could I modify the code so that I don't have to copy and paste the whole code and changing toggle() to toggle2(), toggle3() for each separate show/hide toggle on the same page?
Thank you very much!
You can use element.style.fontSize to dynamically set the font size of an element.
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.style.fontSize = "50px";
text.innerHTML = "show";
} else {
ele.style.display = "block";
text.style.fontSize = "30px";
text.innerHTML = "hide";
}
}
document.getElementById("displayText").addEventListener('click', function(){
toggle();
});
#toggleText{
display:none;
}
#displayText{
color: #00af00;
background: #d9d9d9;
padding: 4px 20px;
display: inline-block;
text-decoration:none;
}
<p id="displayText">show</p>
<div id="toggleText">
Hidden or naw?
</div>
You don't have to create toggle2, toggle3, This will make your code redundant. Instead, add a parameter on your toggle to pass the toggleText.
<script language="javascript">
function toggle(toggleText) {
var ele = document.getElementById(toggleText);
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "show";
}
else {
ele.style.display = "block";
text.innerHTML = "hide";
}
}
</script>
For the font, you can have this on your css.
<style>
#displayText {
font: bold 12px Georgia, serif;
}
</style>

Having to click Twice to get one response

I have made a dropdown that appears on click on a button. Pretty simple, except for how I have to click twice to get the js function to execute. After I click it the first, it appears and disappears like it should - taking only one click. I have no clue why it would require this and have searched for fixes, but none of them seem to work.
Here is my HTML:
<ul class="resources-menu">
<li>
<button onclick="res()" id="resbut" onblur="setTimeout('reshide()', 175)">Resources</button>
<ul id="resblock">
<li style="padding-bottom: 20px; text-align:center;padding-top:25px">
<button onclick="dirlnk()">Directory</button>
</li>
</ul>
</li>
</ul>
CSS:
.resources-menu {
width:88px;
float:left;
}
#resbut {
font-weight:700;
height:30px;
text-decoration:underline;
border-radius:3px;
border-color: black;
}
ul.resources-menu, ul.resources-menu ul {
list-style:none;
margin:0;
padding:0;
position: relative;
}
#resblock {
width: 90px;
background-color: lightblue;
display: none;
position: absolute;
border-bottom-left-radius: 15px;
border-bottom-right-radius:15px;
border-top-right-radius:10px;
border:solid;
border-color:black;
}
JavaScript
function res() {
if (document.getElementById('resblock').style.display == 'none') {
document.getElementById('resblock').style.display = 'block';
document.getElementById('resbut').style.background = "lightblue";
document.getElementById('resbut').style.borderBottomRightRadius = "0px";
document.getElementById('resbut').style.borderBottomLeftRadius = "0px";
document.getElementById('resbut').style.borderBottom = "none";
document.getElementById('resbut').style.textDecoration = "none";
} else {
document.getElementById('resblock').style.display = 'none';
document.getElementById('resbut').style.background = "";
document.getElementById('resbut').style.borderBottomRightRadius = "";
document.getElementById('resbut').style.borderBottomLeftRadius = "";
document.getElementById('resbut').style.borderBottom = "";
document.getElementById('resbut').style.textDecoration = "";
}
}
function reshide() {
document.getElementById('resblock').style.display = 'none';
document.getElementById('resbut').style.background = "";
document.getElementById('resbut').style.borderBottomRightRadius = "";
document.getElementById('resbut').style.borderBottomLeftRadius = "";
document.getElementById('resbut').style.borderBottom = "";
document.getElementById('resbut').style.textDecoration = "";
}
function dirlnk() {
window.location = "/Portal/directory";
}
You're looking at the style property when it's in the CSS files, not a style attribute. Use getComputedStyle instead:
function res() {
var resblock = document.getElementById('resblock');
var resblockStyle = resblock.style;
var resbutStyle = document.getElementById('resbut').style;
if (getComputedStyle(resblock).display === 'none') {
resblockStyle.display = 'block';
resblockStyle.background = "lightblue";
resbutStyle.borderBottomRightRadius = "0px";
resbutStyle.borderBottomLeftRadius = "0px";
resbutStyle.borderBottom = "none";
resbutStyle.textDecoration = "none";
} else {
reshide();
}
}
function reshide() {
var resblockStyle = document.getElementById('resblock').style;
var resbutStyle = document.getElementById('resbut').style;
resblockStyle.display = 'none';
resbutStyle.background = "";
resbutStyle.borderBottomRightRadius = "";
resbutStyle.borderBottomLeftRadius = "";
resbutStyle.borderBottom = "";
resbutStyle.textDecoration = "";
}
function dirlnk() {
window.location.href = "/Portal/directory";
}
It's also a good idea to cache your variables so you don't need to query the DOM for each style addition. Your reshide function does the same thing as the else in your res function -- you should avoid duplicating code where practicable.
Compatibility issues
As #garromark correctly notes, this solution won't work if you need to support older browsers (i.e. IE8 and below). Alternatively, you can add a class called .no-display and check whether that class is present or not:
.no-display {
display: none !important;
}
Then your JavaScript check:
if (/\bno\-display\b/.test(resblock.className)) {

Categories

Resources