Develop Reference

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 :)

How to create paragraphs that function as filters

I'm wondering how to make this code much simpler and shorter.
I have three paragraphs in HTML which are used as filters.
Their IDs, respectively, are "all", "positive" and "negative".
They are referring to reviews.
Underneath them are three divs which will contain actual reviews.
They also carry IDs with names "allcont", "poscont" and "negcont", respectively.
The idea here is when I click on "all" paragraph only the "allcont" div should show up without "postcont" and "negcont".
The same goes for "positive" paragraph and "negative" paragraph.
This way I would create three filter buttons which show different reviews.
Here is the code:
var allcont = document.getElementById("allcont");
var poscont = document.getElementById("poscont");
var negcont = document.getElementById("negcont");
var all = document.getElementById("all");
var positive = document.getElementById("positive");
var negative = document.getElementById("negative");
all.onclick = function(){
allcont.style.display = "block";
poscont.style.display = "none";
negcont.style.display = "none";
all.style.color = "red";
positive.style.color = "white";
negative.style.color = "white";
}
positive.onclick = function(){
poscont.style.display = "block";
allcont.style.display = "none";
negcont.style.display = "none";
positive.style.color = "red";
all.style.color = "white";
negative.style.color = "white";
}
negative.onclick = function(){
negcont.style.display = "block";
poscont.style.display = "none";
allcont.style.display = "none";
negative.style.color = "red";
all.style.color = "white";
positive.style.color = "white";
}
When any of the paragraphs is clicked it should change the color to red as I wrote in the code above.
This works but looks very ugly and complicated and I'm sure it can be done a lot easier using a for loop or something similar.
Thanks in advance for the suggestions!

I hate recommending jQuery, but with jQuery, it will become simpler.
$(function(){
$(".pfilter").on("click", function(){
var $this = $(this);
$(".cont").hide();
$("#"+$this.data("show")).show();
$(".pfilter").css("color", "blue");
$this.css("color", "red");
});
});
p {
cursor: pointer;
display: inline-block;
margin: 0 10px;
color: blue;
}
div.cont {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="all" data-show="allcont" class="pfilter">ALL</p>
<p id="positive" data-show="poscont" class="pfilter">POSITIVE</p>
<p id="negative" data-show="negcont" class="pfilter">NEGATIVE</p>
<hr>
<div id="allcont" class="cont">ALLCONT DIV</div>
<div id="poscont" class="cont">POSTCONT DIV</div>
<div id="negcont" class="cont">NEGCONT DIV</div>

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

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.

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";
}
})