如何制作可重复使用的按钮

Question

如何制作可重复使用的按钮

3

我是JavaScript的新手，想要创建一个按钮，点击后可以改变对象的位置。但是点击一次后，其他东西都不起作用了。以下是问题的核心代码，以及我想应用它的代码。也许有人能告诉你如何正确地制作重新开始按钮，而不是不断创建新的div。

    <!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>

我的项目

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';
});

- Kyzlyk

在当前状态下，你的代码表示：当你点击按钮时，将按钮从顶部移动到50px。你期望会发生什么？ - Emiel Zuurbier

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Brother58697 · Accepted Answer

据我所理解，您希望按钮在每次单击时向下移动。在这种情况下，回调函数当前保持将距离从顶部设置为50px。您只需要让函数将当前值加上50即可。

   <!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>

在这里进行测试。

需要注意的事项：

值以像素为后缀的字符串形式保存，即"50px"，因此我们将使用parseInt()将其转换为整数以便添加。
在设置样式之前（即第一次单击之前），它的值是""而不是0，这与parseInt()不兼容，因此使用了OR||运算符。