Stack Overflow Asked by Liel Barouch on January 14, 2021
im trying to change the content of a div by clicking on a button inside the div.
The div contain few buttons and on each button click, I want to show a new div with text and by clicking on the new div, I want to show the original div.
this is the original div:
<div id="services" class="container-fluid text-center">
<div class="col-sm-4">
<button class="glyphicon glyphicon-heart logo-small"></button>
<h4>blalala</h4>
<p>blalala</p>
</div>
</div>
I’m trying to show a different div by clicking on the button instead of the "services" div.
I hope this helps.
We have a div
holds 3 buttons
, each button
has it's own text value.
Each time we click on a button
we create a new div
with a p
holding the value of the button
we clicked on.
(function(){
function printButtons(){
// array to store the HTML output
const output = [];
// loop to get all the buttons
myBtnsArr.forEach((button) => {
let myBtn = `<button class="${button.class}" id="${button.id}">
${button.content}
</button>`;
//print the results
output.push(myBtn);
buttonsDiv.innerHTML = output.join('');
});
}
// the div we're going to print the buttons in it
const buttonsDiv = document.getElementById('allBtns');
// all the buttons (in an array)
const myBtnsArr = [
{class: 'myBtn', id: 'button1', content: 'button 1'},
{class: 'myBtn', id: 'button2', content: 'button 2'},
{class: 'myBtn', id: 'button3', content: 'button 3'}
];
// Run the function
printButtons();
})();
// Get the button
let myBtn1 = document.getElementById('button1');
let myBtn2 = document.getElementById('button2');
let myBtn3 = document.getElementById('button3');
let myDiv = document.getElementById('myDiv');
// Run the "createdNewDiv" function when clicking on the button, passing the text as an argument
myBtn1.addEventListener('click', () => {
let button1Text = "This is button 1 text";
createNewDiv(button1Text);
});
myBtn2.addEventListener('click', () => {
let button2Text = "This is button 2 text";
createNewDiv(button2Text);
});
myBtn3.addEventListener('click', () => {
let button3Text = "This is button 3 text";
createNewDiv(button3Text);
});
// When calling the functuin....
function createNewDiv(text){
// 1- We create a new div
let theNewDiv = document.createElement('div');
theNewDiv.classList.add('createdDiv');
// 2- We create a new pagaraph to hold the text we passed
let thewNewPagaraph = document.createElement('p');
thewNewPagaraph.classList.add('createdParagraph');
thewNewPagaraph.innerHTML = text;
// append the 'p' to the 'div'
theNewDiv.appendChild(thewNewPagaraph);
// append the new div to the original div
myDiv.appendChild(theNewDiv);
// when clicking on the new div we delete it, then we see the original div back.
let createdDiv = document.querySelector('.createdDiv');
createdDiv.addEventListener('click', () => {
createdDiv.remove();
});
}
#myDiv {
border: 1px solid;
width: 400px;
height: 200px;
padding: 20px 0;
text-align: center;
position: relative;
border-radius: 4px;
}
#allBtns {
display: flex;
justify-content: space-around;
}
.createdDiv {
position: absolute;
width: 100%;
height: 100%;
background-color: #ebebeb;
border-radius: 4px;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<div id="myDiv">
<div id="allBtns"></div>
<h4 id="myHeading">My h4</h4>
<h4 id="myParagraph">My pagaraph</h4>
</div>
Answered by 001 on January 14, 2021
There are some areas where your question doesn't make sense, but from what I understood, this JavaScript function will give you a some help to solve your problem.
function btnClick() {
//adding some text to newly created div element
var newDiv = document.createElement('div');
newDiv.innerText = 'new Value';
//if you want to display your div element
newDiv.style.dislpay = 'block';
//If you want to access existing div element
var originalDiv = document.querySelector('#original-div');
}
Answered by Deshan-Charuka on January 14, 2021
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP