We Keep Coding

getElement for class?

I want to make this works with class, instead of id:
function su() {
var x = document.getElementById("dh");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<button onclick="su()" class="sh"></button>
<div class="dh">
</div>

you need to use for loop.
Also, consider using meaningful names for your classes
const elements = document.getElementsByClassName('dh');
function su(){
for(let i =0; i< elements.length; i++){
const x = elements[i];
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
}

style.display = "boxed"; isnt working

Trying to display a different image in a different location when clicked, this is an interval set to 10ms and when the value changes it should switch up the divs, one being none, and one boxed.
function test() {
var x = document.getElementById('spc_02');
var y = document.getElementById('purchase_01');
if (rest === 0) {
x.style.display = "none";
y.style.display = "boxed";
}
if (rest === 1) {
x.style.display = "boxed";
y.style.display = "none";
}
var x = document.getElementById('spc_03');
var y = document.getElementById('purchase_02');
if (news === 0) {
x.style.display = "none";
y.style.display = "boxed";
} if (news === 1) {
x.style.display = "boxed";
y.style.display = "none";
}
}

HTML/JS: Change inner.HTML and reset it back

So I have got this HTML-Code
<button id="demo" onclick="toogleFunction()">Login</button>
and this JS-Code
function toogleFunction()
{
var x = document.getElementById('but_login');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
document.getElementById("demo").innerHTML = "Insert your data!";
}
The code does what it sould do:
- it is showing me the spoiler
- the name changes
My question is: How can I do it so that it changes the name back to "login", when I click again on the button, or when I click on another button.
Thanks!

function toogleFunction()
{
var x = document.getElementById('but_login');
var demo = document.getElementById("demo")
var text = demo.innerText;
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
if(text === "Login"){
demo.innerText = "Insert your data!";
}else{
demo.innerText = "Login";
}
}

How to switch show/hide tags

I'm not a programmer so I hope you will pardon me if I will write not correct things.
I have two fieldset with two different "id"
I tried to write a code in javascript that when I show the 1st the 2nd will be hided and viceversa.
I can't understand where I'm doing wrong.
Can you help me?
Here html
<label onclick="add()"></label>
<label onclick="modify()"></label>
<fieldset id="add">some text</fieldset>
<fieldset id="modify">some other text</fieldset>
and here my javascript text
function add() {
var x = document.getElementById('add');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
function modify() {
var y = document.getElementById('modify');
if (y.style.display === 'none') {
y.style.display = 'block';
x.style.display = 'none';
} else {
y.style.display = 'none';
}
}
the problem is that not only I would like that when I do click on the first it open and with another click it will close but also that when 1 fieldset is shown, the other will be hided and viceversa.
Thank you

You can use below function
function hideShow(targetId) {
var targetNode = document.getElementById(targetId);
if(targetNode.style.display === 'block') {
return; // If click is on the node which is already shown, just return
}
var x = document.getElementById('add');
var y = document.getElementById('modify');
if (x.style.display === 'none') {
x.style.display = 'block';
y.style.display = 'none';
} else {
y.style.display = 'block';
x.style.display = 'none';
}
}
And use same function for both,
<label onclick="hideShow('add')"></label>
<label onclick="hideShow('modify')"></label>
<fieldset id="add">some text</fieldset>
<fieldset id="modify">some other text</fieldset>

You need to define x in your modify function. Or like #ibrahim said, just defined both variables outside the sope
function modify() {
var y = document.getElementById('modify');
var x = document.getElementById('add')
if (y.style.display === 'none') {
y.style.display = 'block';
x.style.display = 'none';
} else {
y.style.display = 'none';
}
}

Simple fix, if you want to get working.
function add() {
var x = document.getElementById('add');
var y = document.getElementById('modify');
if (x.style.display === 'none') {
x.style.display = 'block';
y.style.display = 'none';
} else {
x.style.display = 'none';
}
}
function modify() {
var x = document.getElementById('add');
var y = document.getElementById('modify');
if (y.style.display === 'none') {
y.style.display = 'block';
x.style.display = 'none';
} else {
y.style.display = 'none';
}
}
As you can see both has x and y var so that none of them is undefined. To move to clean code, you may wish to bring the var outside of the methods(reduce redundancy of the code)

onClick - Hide/Display Div

In this i want a function that when the user click on "Button 01" it should make visible the DIVid "01". After this when click on some other button, it should it hide the previous DIVid and make visible the relevant DIVid.
I have created a fiddle.
function Visibility() {
var har_element = document.getElementById('C');
var meth_element = document.getElementById('D');
var main_element = document.getElementById('E');
var vis = har_element.style;
if(vis.display == 'block') {vis.display = 'block';
meth_element.style.display='block';
main_element.style.display='block';
} else {
vis.display = 'block';
meth_element.style.display='block';
main_element.style.display='block';
}
}

try this
window.onload = function(){
hideSomeDivs();
}
function showHide(showHidebuttonId)
{
hideAll();
if(showHidebuttonId == "1")
document.getElementById("first").style.display = 'block';
else if(showHidebuttonId == "2")
document.getElementById("second").style.display = 'block';
else if(showHidebuttonId == "3")
document.getElementById("third").style.display = 'block';
else if(showHidebuttonId == "4")
document.getElementById("fourth").style.display = 'block';
else if(showHidebuttonId == "5")
document.getElementById("fifth").style.display = 'block';
}
function hideAll(){
document.getElementById("first").style.display = 'none';
document.getElementById("second").style.display = 'none';
document.getElementById("third").style.display = 'none';
document.getElementById("fourth").style.display = 'none';
document.getElementById("fifth").style.display = 'none';
}
function hideSomeDivs()
{
document.getElementById("second").style.display = 'none';
document.getElementById("third").style.display = 'none';
}