Javascript 重用函数以删除项目_Javascript_Html_Dom

Javascript 重用函数以删除项目

javascript html dom

Javascript 重用函数以删除项目,javascript,html,dom,Javascript,Html,Dom,我想制作一个添加和删除项目的按钮。单击“删除表单”按钮后，它将变为“添加表单”。但在我删除和添加表单之后，我想再次删除表单，但由于我不理解的原因，这不会发生我正在使用最新的chrome浏览器版本 <!DOCTYPE html> <html lang="en" style="height: 100%"> <head> <meta charset="UTF-8"> <meta name="viewport" content=

我想制作一个添加和删除项目的按钮。单击“删除表单”按钮后，它将变为“添加表单”。但在我删除和添加表单之后，我想再次删除表单，但由于我不理解的原因，这不会发生

我正在使用最新的chrome浏览器版本

<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

    <title>Task 1</title>
</head>
<body style="height: 100%">
    <div class="container h-100">
        <div class="row h-100 justify-content-center align-content-center">
            <div class=""><button type="button" class="btn btn-primary">Open Google</button></div>
            <div class=""><button type="button" class="btn btn-danger" id="danger">Delete form</button></div>
            <div class="breaker w-100" style="height:10%;"></div>
            <form id="form"> 
                <div class="form-group">
                    <label for="formGroupExampleInput">Example label</label>
                    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
                </div>
                <div class="form-group">
                    <label for="formGroupExampleInput2">Another label</label>
                    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
                </div>
            </form>
        </div>
    </div>  
    <script src="./index.js"></script>
</body>
</html>

示例代码：

为什么不隐藏它？这要容易得多

函数切换（）{
var元素=document.getElementById（“表单”）；
如果（element.style.display==“无”）{
element.style.display=“块”；
} 
否则{
element.style.display=“无”；
}
}


任务1
打开谷歌
删除表格
示例标签
另一个标签

为什么不把它藏起来？这要容易得多

函数切换（）{
var元素=document.getElementById（“表单”）；
如果（element.style.display==“无”）{
element.style.display=“块”；
} 
否则{
element.style.display=“无”；
}
}


任务1
打开谷歌
删除表格
示例标签
另一个标签

事件侦听器没有被删除，因此这两个函数都被调用（可能多次），具体取决于按钮的单击次数

就我个人而言，我认为创建两个按钮会更容易，每个按钮都有独立的单击处理程序，并根据单击的按钮隐藏/显示它们

但是，要解决代码中的当前问题，您需要在附加新的事件侦听器之前删除以前使用的事件侦听器。

事件侦听器不会被删除，因此这两个函数都会被调用（可能多次），具体取决于按钮的单击次数

就我个人而言，我认为创建两个按钮会更容易，每个按钮都有独立的单击处理程序，并根据单击的按钮隐藏/显示它们

但是，要解决代码中的当前问题，您需要在附加新的事件侦听器之前删除以前使用的事件侦听器。

代码中的主要问题是事件侦听器不断被添加，但没有被删除，这导致它们堆积起来，无法预测地运行。我添加了一个函数，用于确定按钮处于何种状态，并执行正确的功能

add\u function

或

remove\u function

我也改变了一些小事情

为了安全起见，现在尽可能使用
```
innerHTML
```
来
```
textContent
```

按钮类使用

按钮.classList.add

和

按钮.classList.remove更新


该按钮是使用ID而不是不可靠的类名找到的
按钮保存在变量中，而不是继续查找它
删除了按钮\u change
函数，因为它很难重构



JavaScript:
document.getElementsByClassName('btn-primary')[0].addEventListener("click", open_google);

let inner_form = document.getElementById('form').innerHTML;

let add_delete_button = document.querySelector('#add-delete-button');
add_delete_button.addEventListener("click", on_add_delete_clicked);

function open_google() {
    window.open('http://google.com', '_blank');
}

function on_add_delete_clicked() {
    let is_adding = add_delete_button.classList.contains("btn-success");
    if (is_adding) {
        add_function();
    } else {
        delete_function();
    }
}

function add_function() {
    const button = add_delete_button;
    document.getElementById('form').innerHTML = inner_form;

    // Update button
    button.textContent = 'Delete form';
    button.classList.remove("btn-success");
    button.classList.add("btn-danger");
}

function delete_function() {
    let element = document.getElementById('form');
    while (element.firstChild) {
        element.removeChild(element.firstChild);
    }

    // Update button
    const button = add_delete_button;
    button.textContent = 'Add form';
    button.classList.remove("btn-danger");
    button.classList.add("btn-success");
}

HTML:

任务1
打开谷歌
删除表格
示例标签
另一个标签
代码的主要问题是事件侦听器不断被添加，但没有被删除，这导致它们堆积起来，无法预测地运行。我添加了一个函数，用于确定按钮处于何种状态，并执行正确的功能add\u function
或remove\u function

我也改变了一些小事情

为了安全起见，现在尽可能使用innerHTML
来textContent
按钮类使用按钮.classList.add
和按钮.classList.remove更新

该按钮是使用ID而不是不可靠的类名找到的
按钮保存在变量中，而不是继续查找它
删除了按钮\u change
函数，因为它很难重构


JavaScript:
document.getElementsByClassName('btn-primary')[0].addEventListener("click", open_google);

let inner_form = document.getElementById('form').innerHTML;

let add_delete_button = document.querySelector('#add-delete-button');
add_delete_button.addEventListener("click", on_add_delete_clicked);

function open_google() {
    window.open('http://google.com', '_blank');
}

function on_add_delete_clicked() {
    let is_adding = add_delete_button.classList.contains("btn-success");
    if (is_adding) {
        add_function();
    } else {
        delete_function();
    }
}

function add_function() {
    const button = add_delete_button;
    document.getElementById('form').innerHTML = inner_form;

    // Update button
    button.textContent = 'Delete form';
    button.classList.remove("btn-success");
    button.classList.add("btn-danger");
}

function delete_function() {
    let element = document.getElementById('form');
    while (element.firstChild) {
        element.removeChild(element.firstChild);
    }

    // Update button
    const button = add_delete_button;
    button.textContent = 'Add form';
    button.classList.remove("btn-danger");
    button.classList.add("btn-success");
}

HTML:

任务1
打开谷歌
删除表格
示例标签
另一个标签
此实现将实现您想要的文本和上下文切换
function action(mouseevent) {
  const button = mouseevent.target;
  let element = document.getElementById('form');
  if(element.firstChild) {
    while (element.firstChild) {
      element.removeChild(element.firstChild);
    }
    button.innerHTML = 'Add form';
    button.classList.remove('btn-danger');
    button.classList.add('btn-success');
  } else {
    document.getElementById('form').innerHTML = inner_form;
    button.innerHTML = 'Delete Form';
    button.classList.add('btn-danger');
    button.classList.remove('btn-success');
  }      
}

此实现将完成您想要的文本和上下文切换
function action(mouseevent) {
  const button = mouseevent.target;
  let element = document.getElementById('form');
  if(element.firstChild) {
    while (element.firstChild) {
      element.removeChild(element.firstChild);
    }
    button.innerHTML = 'Add form';
    button.classList.remove('btn-danger');
    button.classList.add('btn-success');
  } else {
    document.getElementById('form').innerHTML = inner_form;
    button.innerHTML = 'Delete Form';
    button.classList.add('btn-danger');
    button.classList.remove('btn-success');
  }      
}

真的，我现在明白了。我认为它根本不是同一个元素。真的，我现在明白了。我不认为这是同一个元素。@AbdulkhayKhabibulin如果可以的话，你为什么要让它变得困难？我知道的越多，你就越简单。@AbdulkhayKhabibulin如果可以的话，你为什么要让它变得困难？我知道的越多，你就越简单。这是一个好的决定，我已经研究并尝试过了。但是添加和删除的功能也执行按钮的更新，它不应该在单独的功能中吗？这是一个很好的决定，我已经研究并尝试过了。但是添加和删除的功能也执行按钮的更新，它不应该在单独的功能中吗？