TransWikia.com

How to change the entire div content on button click

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.

2 Answers

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

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP