We Keep Coding

Display content related to only those button it is clicked in HTML

I have three buttons in HTML, orders and products and supplier. I want when the user clicks orders order is being shown, when the user clicks products, the product is shown, and the name of the supplier when it is clicked.
function changedata(parameter){
if(parameter==0){
document.getElementById('myorders').style.fontSize="25px";
}
else if(parameter==1){
document.getElementById('myproducts').style.fontSize="25px";
}
else{
document.getElementById('mysupplier').style.fontSize="25px";
}
}
<button class="button" onclick="changedata(0)">ORDERS</button>
<button class="button" onclick="changedata(1)">PRODUCTS</button>
<button class="button" onclick="changedata(2)">SUPPLIER</button>
<div id="myorders">
<p>Laptop, Earphone</p>
</div>
<div id="myproducts">
<p>Earphone, smart watch</p>
</div>
<div id="mysupplier">
<p>Amazon, E-kart</p>
</div>
But it won't hide data and serve my need, I'm a beginner in web development, looking for kind help to show data only when the corresponding button is pressed.

Try giving each element a default value of display:none in your css, as such -
#myorders,
#mysuppliers,
#myproducts {
font-size: 25px;
display: none;
}
This will select each element and hide them right away.
Then, when a button is pressed, you can use
document.getElementById('___').style.display = 'block';
to then show that element.
Here is the final product:
function changedata(parameter){
if(parameter==0){
document.getElementById('myorders').style.display = 'block';
}
else if(parameter==1){
document.getElementById('myproducts').style.display = 'block';
}
else{
document.getElementById('mysupplier').style.display = 'block';
}
}
#myorders,
#myproducts,
#mysupplier{
font-size: 25px;
display: none;
}
<button class="button" onclick="changedata(0)">ORDERS</button>
<button class="button" onclick="changedata(1)">PRODUCTS</button>
<button class="button" onclick="changedata(2)">SUPPLIER</button>
<div id="myorders">
<p>Laptop, Earphone</p>
</div>
<div id="myproducts">
<p>Earphone, smart watch</p>
</div>
<div id="mysupplier">
<p>Amazon, E-kart</p>
</div>
If you would like to have the element toggle between hidden and shown on each button press, I recommend toggling a class with javascript, as such:
function changedata(parameter){
if(parameter==0){
document.getElementById('myorders').classList.toggle('active');
}
else if(parameter==1){
document.getElementById('myproducts').classList.toggle('active');
}
else{
document.getElementById('mysupplier').classList.toggle('active');
}
}
#myorders,
#myproducts,
#mysupplier{
font-size: 25px;
display: none;
}
#myorders.active,
#myproducts.active,
#mysupplier.active{
display: block;
}
<button class="button" onclick="changedata(0)">ORDERS</button>
<button class="button" onclick="changedata(1)">PRODUCTS</button>
<button class="button" onclick="changedata(2)">SUPPLIER</button>
<div id="myorders">
<p>Laptop, Earphone</p>
</div>
<div id="myproducts">
<p>Earphone, smart watch</p>
</div>
<div id="mysupplier">
<p>Amazon, E-kart</p>
</div>

There are slightly easier ways to connect each div to its corresponding button, and one of them is to use data attributes. We can add a data attribute to each button the text of which matches the id of its corresponding div.
(I'm assuming that when you click on one button all the other divs are hidden, and only its div shows.)
This example uses more modern JS techniques but I'll guide you through them, comment everything, and provide documentation at the end. You don't have to understand everything here but you're probably going to bump up against these things eventually, so you might as well take a look at them now.
Here's a rundown of how this all works:
Remove the inline listeners from the buttons. Modern JS uses addEventListener.
Wrap the buttons in a container. What we're going to use is a technique called event delegation. Instead of attaching listeners to every button we attach one to the container and this captures any events that "bubble up" the DOM from its child elements. We can then call a function when a child element is clicked.
The function does a few things. First it checks to see if the clicked element was actually a button. Then it hides all the "panels" by removing a class called "show" from them ("show" sets the element's display to block - initially all panels have their display set to none). Then based on the id from the button's data attribute it forms a selector with it, and we use that to target its corresponding div and apply the "show" class.
// Cache out buttons container, and all of the panels
const buttons = document.querySelector('.buttons');
const panels = document.querySelectorAll('.panel');
// Add an event listener to the buttons container
buttons.addEventListener('click', handleClick);
// When a child element of `buttons` is clicked
function handleClick(e) {
// Check to see if its a button
if (e.target.matches('button')) {
// For every element in the `panels` node list use `classList`
// to remove the show class
panels.forEach(panel => panel.classList.remove('show'));
// "Destructure" the `id` from the button's data set
const { id } = e.target.dataset;
// Create a selector that will match the corresponding
// panel with that id. We're using a template string to
// help form the selector. Basically it says find me an element
// with a "panel" class which also has an id that matches the id of
// the button's data attribute which we just retrieved.
const selector = `.panel[id="${id}"]`;
// Select the `div` and, using classList, again add the
// show class
document.querySelector(selector).classList.add('show');
}
}
.panel { display: none; }
.show { display: block; }
.button { text-transform: uppercase; }
.button:hover { cursor: pointer; background-color: #fffff0; }
<div class="buttons">
<button data-id="myorders" class="button">Orders</button>
<button data-id="myproducts" class="button">Products</button>
<button data-id="mysupplier" class="button">Supplier</button>
</div>
<div class="panel" id="myorders"><p>Laptop, Earphone</p></div>
<div class="panel" id="myproducts"><p>Earphone, smart watch</p></div>
<div class="panel" id="mysupplier"><p>Amazon, E-kart</p></div>
Additional documentation
addEventListener
classList
Destructuring assignment
forEach
matches
querySelector
querySelectorAll
Template string

Dynamic webpage? (HTML DOM, js)

I'm trying to change the content in a HTML using DOM JS. Rather than getting the elements by the P tag, I want to use the DIV ID.Is this possible?
In my HTML, I have two separate DIV classes, both named the same. I want one to display depending on what button the user clicks.
HTML:
<button type="button" onclick="changeContent(1)" >Example 1</button>
<button type="button" onclick="changeContent(2)" >Example 2</button>
<p id="demoX"></p>
<div class="ex1">
<h1> Example 1 </h1>
<p> nothing </p>
</div>
<div id="ex1">
<h1> Example 2 </h1>
<p> more of nothing </p>
</div>
JS:
function changeContent(inNum) {
var x = document.getElementById("ex1");
if (inNum == 1){
document.getElementById("demoX").innerHTML = x[0].innerHTML;
}
else if (inNum == 2){
document.getElementById("demoX").innerHTML = x[1].innerHTML;
}
}
How do I approach this?

First of all, you shouldn't give the same ID to more than one div so just give them both the class - 'ex1' - and then you select them by a javascript selector called getElementsByClassName('class-name') [replace class-name with the actual class name, in this case ex1] this function gets all the elements with this class name and stores them in an array. Then you do the logic for which button is pressed. And when a button is pressed you should set the display of the wanted div to 'block' [you should default it to hidden in CSS].
function showDiv(id) {
var divs = document.getElementsByClassName('ex1');
if (id === 'btn1') { divs[0].style.display = 'block' }
if (id === 'btn2') { divs[1].style.display = 'block' }
}
.ex1 {
width: 300px;
height: 300px;
background-color: green;
display: none;
margin: 50px;
}
<button id='btn1' onClick='showDiv(this.id)'>button 1</button>
<button id='btn2' onClick='showDiv(this.id)'>button 2</button>
<div class='ex1'>I'm div 1</div>
<div class='ex1'>I'm div 2</div>
you can also change the .style thing to change the inner html as you have done in your original code.

How do I hide the closest element to the element that was clicked without jQuery?

I have a function that changes the src attribute of an icon when this one is clicked.
I also want it to hide the closest icon of the class fave_icon. I tried the following but it's not working:
function trash(event, trashcan){
event.stopPropagation();
if (trashcan.getAttribute('src') == "Iconos/tacho.png")
{
trashcan.src = "Iconos/warning.png"; //this works ok
var heart = trashcan.closest(".fave_icon");
heart.style.visibility = "hidden"
}
}
Basically I want to hide the closest element with class fave_icon to trashcan.
On the HTML I have this several times:
<button class="accordion">
<div>
<img src="Iconos/heart.png" onclick="fav(event,this);" alt="Fave" class="fave_icon">
</div>
<div>
<img src="Iconos/tacho.png" onclick="trash(event,this);" alt="Delete" class="delete_icon">
</div>
</button>

If fave_icon is a class then you have to place dot (.) before the class name as part of the selector.
Change var heart = trashcan.closest("fave_icon");
To
var heart = trashcan.closest(".fave_icon");
Based on the code and HTML you have provided you can do something like the following:
function trash(event, trashcan){
event.stopPropagation();
if (trashcan.getAttribute('src') == "Iconos/tacho.png"){
trashcan.src = "Iconos/warning.png"; //this works ok
var heart = trashcan.closest('button').querySelector('.fave_icon');
heart.style.visibility = "hidden";
}
}
<button class="accordion">
<div>
<img src="Iconos/heart.png" onclick="fav(event,this);" alt="Fave" class="fave_icon">
</div>
<div>
<img src="Iconos/tacho.png" onclick="trash(event,this);" alt="Delete" class="delete_icon">
</div>
</button>

From the trash icon, you go up a level to the div, select the previousElementSibling to get the heart's div, and then go down a level to the heart image itself.
Because the element is already included in the event target, you don't need to pass this. Or, even better, if you select the trash image first, you can avoid this entirely and use explicit variable names, which are easier to understand and debug.
But inline event handlers are essentially eval inside HTML markup - they're bad practice and result in poorly factored, hard-to-manage code. Seriously consider attaching your events with JavaScript, instead, eg: https://developer.mozilla.org/en/DOM/element.addEventListener
Another problem is that buttons should not have closing tags. Use a container element instead, like a div.
So, try something like this:
document.querySelectorAll('img[src="Iconos/tacho.png"]').forEach(img => {
img.onclick = () => {
const heartImg = img.parentElement.previousElementSibling.children[0];
heartImg.style.visibility = 'hidden';
};
});
<div class="accordion">
<div>
<img src="Iconos/heart.png" alt="Fave" class="fave_icon">
</div>
<div>
<img src="Iconos/tacho.png" alt="Delete" class="delete_icon">
</div>
</div>

you can add a class to the clicked element and use the general sibling combinator if the two items are adjacent.
document.getElementById("hide")
.addEventListener("click", (event) => {
event.target.classList.add('active');
}, false);
#hide.active~.element {
visibility: hidden;
}
#hide {
cursor: pointer;
}
.accordion {
padding: 15px;
background: lightgrey;
border-bottom: 1px solid grey;
}
.accordion div {
color: black;
margin-right: 20px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/icono/1.3.0/icono.min.css" rel="stylesheet" />
<div class="accordion">
<div class="icono-trash" id="hide"></div>
<div class="element icono-heart"></div>
</div>

Changing what is shown to a user using dynamic questions

I want to, inside a webpage, as a user a series of questions, and then serve them up a page based on their response. But, I don't want to redirect them to a separate form/page.
For example:
1)Question: Do you want to see a Square?
2)Question: Do you want to see a Circle?
3)Question: Do you want it Red?
4)Question: Do you prefer Blue?
5)Question: Do you want it Orange?
6)Question: Do you prefer Yellow?
The user would see the first question, followed by a yes button and no button. If they clicked yes, then it would show them the 3rd question, if they clicked no, then it would show them the 2nd question. No to 3rd Question leads to 4th Q. No to 2nd Q leads to 5th Q, etc.
The end images are a Red Square, Blue Square, Orange Circle, Yellow Circle, and Black Square, and will be shown to users based on how they moved through the questions.
I know I can do this by giving an id to each question and set of buttons, and showing/hiding button/question sets using JS based on answers to other questions (then showing final based on last question answered) but I'm curious if there's a cleaner way to do this, maybe with some sort of form, tree, and state assignment? In my real-world version it's possible that two answers lead to the same state.
Here's the beginning of my naive implementation:
<div id="b1">
<h5 id="q1">Question: Do you want to see a Square?</h5>
<button id="ay1">Yes</button><button id="an1">No</button>
</div>
<div class ="box" id="b2"><h5 id="q2">Question: Do you want to see a Circle?</h5>
<button id="ay2">Yes</button><button id="an2">No</button>
</div>
<div class ="box" id="b3"><h5 id="q3">Question: Do you want it Red?</h5>
<button id="ay3">Yes</button><button id="an3">No</button>
</div>
And a jsFiddle of the idea

var shape, colour;
$("#an1").click(function() {
$("#b1").fadeOut();
$("#b2").fadeIn();
});
$("#ay1").click(function() {
$("#b1").fadeOut();
$("#b3").fadeIn();
shape="Square";
});
$("#ay2").click(function() {
$("#b2").fadeOut();
$("#b3").fadeIn();
shape="Circle";
});
$("#an2").click(function() {
$("#b2").fadeOut();
$("#b1").fadeIn();
});
$("#ay3").click(function() {
$("#b3").hide();
colour="red";
show();
});
$("#an3").click(function() {
$("#b3").fadeOut();
$("#b4").fadeIn();
});
$("#ay4").click(function() {
$("#b4").hide();
colour="blue";
show();
});
$("#an4").click(function() {
$("#b4").fadeOut();
$("#b5").fadeIn();
});
$("#ay5").click(function() {
$("#b5").hide();
colour="orange";
show();
});
$("#an5").click(function() {
$("#b5").fadeOut();
$("#b6").fadeIn();
});
$("#ay6").click(function() {
$("#b6").hide();
colour="black";
show();
});
$("#an6").click(function() {
$("#b6").fadeOut();
$("#b3").fadeIn();
});
function show() {
var div="<div id='myShape' class='" + shape + "' style='background: " + colour + "'></div>";
document.body.innerHTML+=(div);
}
.box {
position: absolute;
}
#myShape {
width: 100px;
height: 100px;
background: beige;
}
.Circle {
border-radius: 50%;
}
.Red {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class ="box" id="b1"><h5 id="q1">Question: Do you want to see a Square?</h5>
<button id="ay1">Yes</button><button id="an1">No</button>
</div>
<div class ="box" id="b2" hidden><h5 id="q2">Question: Do you want to see a Circle?</h5>
<button id="ay2">Yes</button><button id="an2">No</button>
</div>
<div class ="box" id="b3" hidden><h5 id="q3">Question: Do you want it Red?</h5>
<button id="ay3">Yes</button><button id="an3">No</button>
</div>
<div class ="box" id="b4" hidden><h5 id="q4">Question: Do you want it Blue?</h5>
<button id="ay4">Yes</button><button id="an4">No</button>
</div>
<div class ="box" id="b5" hidden><h5 id="q5">Question: Do you want it Orange?</h5>
<button id="ay5">Yes</button><button id="an5">No</button>
</div>
<div class ="box" id="b6" hidden><h5 id="q6">Question: Do you want it Black?</h5>
<button id="ay6">Yes</button><button id="an6">No</button>
</div>

I want to change the style of all sibling elements

I am using buttons for a tabbed navigation interface. I want to have the active tab red, and the rest black.
<div class="tabs">
<button type="button" onclick="selectTab(this);">Astringents</button>
<button type="button" onclick="selectTab(this);">Exfoliators</button>
<button type="button" onclick="selectTab(this);">Moisturizers</button>
</div>
function selectTab(activeTab){
var siblings = activeTab.parentNode.childNodes;
for (s in siblings){
s.style.color='black';
}
activeTab.style.color='red';
I am having problems accessing the siblings properly. There are more buttons than these three so I need to solve this dynamically. I will be using Ajax so this page will not reload.

You are trying to do extra work... Why not keep a reference to the currently selected tab, then when a new selection is made, reset its style.
Also, it is much better to use CSS classes than inline styles for this (this way, you don't need to muck about with Javascript to change how your tabs look):
<style>
.tab { color: black; }
.tab-selected { color: red; }
</style>
<div class="tab" onclick="selectTab(this)">Tab 1</div>
<div class="tab" onclick="selectTab(this)">Tab 2</div>
<!-- More tabs -->
<script>
var selectedTab = null;
function selectTab(tab) {
if (selectedTab) { selectedTab.className = 'tab'; }
tab.className = 'tab-selected';
selectedTab = tab;
}
</script>