We Keep Coding

I want to hide a div using javascript

I created a div contaning a form and a button. I want to hide the entire div when the button is clicked.
function myFunction() {
let x = document.querySelector("div");
if (x.style.display == "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<div onmouseover="firstPageDisplay();" id="firstPage">
<div><img id="imgs"></div>
<div class="center">
<form class="center">Authentification<br>
<p>Login</p> <input id="login" type="text"><br>
<p>Password</p> <input id="password" type="password"><br><br>
<button onclick="myFunction();" id="btnA">Se connecter</button>
</form>
</div>
</div>
This is what I tried to do, however when I click the button, the div disappears for a split second then reappears again. When I removed the button from the div it worked just fine. How can I make it disappear for good?

you have document.querySelecor('div') which is selecting the first <div> in the whole document, probably not what you want.
the error is here
function myFunction() {
let x = document.querySelector("div");
if (x.style.display == "none") { // error
x.style.display = "block";
} else {
x.style.display = "none";
}
}
you can only set a style, not get a style. Why? Because reasons nobody with common sense will understand. so instead you have to use getComputedStyle(element).styleName
function myFunction() {
let x = document.querySelector("div"); // if this is div you want
if (getComputedStyle(x).display == "none") { // 👍👍👍
x.style.display = "block";
} else {
x.style.display = "none";
}
}
but as mentioned in a comment above, toggling a class and using event listeners are much better practice

Hide clicked button after toggle

I'm using this code to toggle the visibility of a section. When the button is clicked, the section shows.
function myFunction() {
var x = document.getElementById("offerte-toggle");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
<a onclick="myFunction()" id="knop-doorz" class="witte-randen">Offerte opvragen</a>
How can I hide the button after it has been clicked?

your JS code is targetting an element with id offerte-toggle but in your html, the has an id of knop-doorz
Either edit the html id to match the JS or vice versa.
You also don't need to do the if check, just simply set x.style.display = 'none'; before the closing } tag.

Why does my script only act on the first element with a particular ID value?

I have a query that produces a number of DIV id="toggle_panel" I know I can effectively change the ID of the DIV dynamically.
Below is the script, straight from w3schools, which works great out of the box...for the first DIV and first DIV only. How do I apply a dynamic variable from the query to my script?
Second question: How do I get it so the DIV are hidden by default?
function myFunction() {
var x = document.getElementById("toggle_panel");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
Thank you

For your first question, using a class would be more appropriate to tag a collection similar html elements.
So your divs should look something like this:
<div class="toggle_panel">...</div>
<div class="toggle_panel">...</div>
<div class="toggle_panel">...</div>
You could then use document.getElementsByClassName('toggle_panel') to access them.
Also to hide them by default, you could use css to target your classes as shown below.
.toggle_panel {
display: none;
}

As mentioned in the comments, you can only have one instance of an ID. To achieve the result you want you will have to change the <div id="toggle_panel">content</div> to <div class="toggle_panel">content</div>. Then use the following javascript:
function myFunction() {
var panels = document.getElementsByClassName("toggle_panel");
for(var i = 0; i < panels.length; i++) {
var panel = panels[i];
if (panel.style.display === "none") {
panel.style.display = "block";
} else {
panel.style.display = "none";
}
}
}

I think you should use querySelectorAll('toggle_panel') and your code will be like this:
Array.from(document.querySelectorAll('toggle_panel')).forEach((element) => {
element.display = 'none'
})

make div appear when var is bigger than 14. otherwise keep it hidden

<script>var div = document.getElementById('demo');
if (totaal > 14) {
div.style.display = 'block';
div.style.visibility='visible';
}
else {
div.style.display = 'none';
div.style.visibility='hidden';
}</script>
when using this script the div stays hidden and doesnt become bigger. Anyone know what i can do to make the div appear when var 'totaal' is bigger than 14?
Thanks
Edit1: var totaal is already set earlier in the script. Its a large script with adding and subtracting 1 from 'totaal'. That part isn't neccesary so I didn't include it.

You can use function to toggle your div based on the value of totaal :
function toggleDiv(totaal) {
var div = document.getElementById('demo');
if (totaal > 14) {
div.style.display = 'block';
} else {
div.style.display = 'none';
}
}
Now, all the time you change tootal, you can call this function with totaal as parameter to toggle the div

js toggle for multiple divs

I have 3 div which are hidden by default. I want to create a toggle for these 3 but I don't want to create onclick for each div and add this to the js file:
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
I tried creating this scenario with clicked_id but it failed. When I click on the third div, the second one views aswell.
var projectEen = document.getElementById("projectInhoud");
projectEen.style.display = "none";
var projectTwee = document.getElementById("projectInhoudTwee");
projectTwee.style.display = "none";
var projectDrie = document.getElementById("projectInhoudDrie");
projectDrie.style.display = "none";
function displayFunction(clicked_id) {
if (clicked_id == 1) {
projectEen.style.display = "block";
} else {
projectTwee.style.display = "block";
} if(clicked_id == 3) {
projectDrie.style.display = "block";
} else {
projectTwee.style.display = "none";
}
}
How can I use the first code but to display all 3 div without creating the function 3 times?
EDIT:
My html
<div id="1" onclick="displayFunction(this.id)" class="projectTitel">
<h1>Project: a</h1>
</div>
<div id="projectInhoudEen" class="projectInhoud"> content </div>
<div id="2" onclick="displayFunction(this.id)" class="projectTitel">
<h1>Project: b</h1>
</div>
<div id="projectInhoudTwee" class="projectInhoud"> content </div>
<div id="3" onclick="displayFunction(this.id)" class="projectTitel">
<h1>Project: c</h1>
</div>
<div id="projectInhoudDrie" class="projectInhoud"> content </div>

By combining document.getElementsByClassName and EventTarget.addEventListener, you can attach the same event handler to your divs. Inside this handler, you can retrieve the element you clicked on with the event object, provided by the event listener.
EDIT : The HTML you provided makes things a little more complicated because the projectTitel and projectInhoud divs aren't related to each other, except by position.
So, in order to display the right projectInhoud div, we need to find the next projectInhoud after the projectTitel that was clicked on.
To make things better, I would suggest editing the HTML to make projectTitel and projectInhoud divs children of a same parent div.
Meanwhile, I added a getClickedProjectIndex function returns the index of the clicked projectTitel div. And the click event uses this index to show the right projectInhoud.
Then, you can use a simple toggle function that displays the div if it's not visible or hide it if it's visible.
var divs = document.getElementsByClassName("projectTitel");
[...divs].forEach(someDiv => someDiv.addEventListener("click", handler));
// by default, all projectInHound are hidden
hideElements("projectInhoud");
function handler(event) {
// get the clicked project's index :
var projectIndex = getClickedProjectIndex(event);
// toggle the right projectInhoud div :
toggleDiv(document.getElementsByClassName("projectInhoud")[projectIndex]);
}
// hide all elements that have the provided class name
function hideElements(className) {
var elements = document.getElementsByClassName(className);
[...elements].forEach(element => element.style.display = "none");
}
function getClickedProjectIndex(event) {
var elements = document.getElementsByClassName("projectTitel");
var projectIndex = 0;
[...elements].forEach((element, index) => {
if (element.id == event.currentTarget.id) {
projectIndex = index;
}
});
return projectIndex;
}
function toggleDiv(element) {
if (element.style.display === 'none') {
element.style.display = 'block';
} else {
element.style.display = 'none';
}
}
<div id="1" class="projectTitel">
<h1>Project: a</h1>
</div>
<div id="projectInhoudEen" class="projectInhoud" > content a</div>
<div id="2" class="projectTitel">
<h1>Project: b</h1>
</div>
<div id="projectInhoudTwee" class="projectInhoud"> content b</div>
<div id="3" class="projectTitel">
<h1>Project: c</h1>
</div>
<div id="projectInhoudDrie" class="projectInhoud"> content c</div>

I would try something like this in the HTML:
<div class=myDiv onclick=myFunction(this)></div>
<div class=myDiv onclick=myFunction(this)></div>
<div class=myDiv onclick=myFunction(this)></div>
And for your JavaScript:
function myFunction(element){
if(element.style.display = "none"){
element.style.display = "block";
else{
element.style.display = "none";
}
}