CODEWITHSUNDEEP
javascriptbuttonrefactoringreset
Kyzlyk
Kyzlyk

Reputation: 31

How to make reusable button

I'm new to JavaScript and I want to create a button that, when clicked, will change the position of the object. But after clicking once, nothing else works. Below I have provided the code with the very essence of the problem, and my code where I want to apply it. Maybe someone will tell you how to make a restart button correctly, instead of constantly creating new divs.

    <!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
    
        <style>
            button {
            position: relative;
            }
        </style>
    </head>
    <body>
    
        <button>Add new position</button>
    
        <script>
        
            const btn = document.querySelector('button');
        
            btn.addEventListener('click', () => {
                btn.style.top = '50px';
            });
        
        </script>
    </body>
</html>

MY PROJECT

const yes = document.getElementById('yes');
const no = document.getElementById('no');
const body = document.querySelector('.body');
const message = document.querySelector('.message');
const reset = document.querySelector('.panel__close')
const bodyMessage = document.querySelector('.body__message')

const randomNum = Math.floor(Math.random() *100) +1;




yes.addEventListener('click', () => {
    body.innerHTML = '';
    const paraLox = document.createElement('p');
    paraLox.textContent = 'Congratulation, Jaba Loshara Ebaniy!';
    paraLox.style.fontSize = '3rem';
    paraLox.style.textAlign = 'center';
    paraLox.style.fontWeight = '1000';
    paraLox.style.color = 'red';
    body.appendChild(paraLox);



    reset.addEventListener('click', () => { // reset button
        paraLox.parentNode.removeChild(paraLox);
    
    
        const bodyError = document.createElement('div');
        bodyError.setAttribute('class', 'body__error-image');
        bodyMessage.appendChild(bodyError);
    
        const bodyErrorImage = document.createElement('img');
        bodyErrorImage.setAttribute('src', 'error.png')
        bodyErrorImage.style.width = '50px';
        bodyErrorImage.style.height = '50px';
        bodyError.appendChild(bodyErrorImage);
    
        const bodyText = document.createElement('div');
        bodyText.setAttribute('class', 'body__text');
        bodyText.textContent = 'Jaba Lox?';
        bodyMessage.appendChild(bodyText);
    
        const bodyButtons = document.createElement('div');
        bodyButtons.setAttribute('class', 'body__buttons');
        bodyMessage.appendChild(bodyButtons);
    
        const bodyButton1 = document.createElement('div');
        bodyButton1.setAttribute('class', 'body__button');
        bodyButton1.setAttribute('id', 'yes');
        bodyButton1.textContent = 'Yes';
        bodyButtons.appendChild(bodyButton1);
    
        const bodyButton = document.createElement('div');
        bodyButton.setAttribute('class', 'body__button');
        bodyButton.setAttribute('id', 'no');
        bodyButton.textContent ='No';
        bodyButtons.appendChild(bodyButton);
    
        });


});


no.addEventListener('click', () => {
    no.style.position = 'relative';
    no.style.top = randomNum + 'px';
    no.style.bottom = randomNum + 'px';
    no.style.left = randomNum + 'px';
    no.style.right = randomNum + 'px';
});

Upvotes: 3

Views: 393

Answers (1)

Brother58697
Brother58697

Reputation: 3178

From what I understand, you want the button to keep moving down with each click. In that case, the callback currently keeps setting the distance from the top to 50px. All you need to do is have the function add 50 to the current value.

   <!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
    
        <style>
            button {
            position: relative;
            }
        </style>
    </head>
    <body>
    
        <button>Add new position</button>
    
        <script>
        
            const btn = document.querySelector('button');
        
            btn.addEventListener('click', () => {
                btn.style.top = ((parseInt(btn.style.top,10) || 0) + 50) + 'px';
            });
        
        </script>
    </body>
</html>

Test it here

Things to note:

  • The value is saved as a string with a pixel suffix, i.e. "50px", so we'll use parseInt() to convert it to an int we can add to.
  • Before setting the style, AKA before the first click, its value is "" not 0, which doesn't work with parseInt(), hence the OR || operator.

Upvotes: 1

Related Questions