如何访问JavaScript动态创建的HTML元素 实现输入为空时隐藏待办告警

• 全局声明的todo_alarm_div从未被插入到DOM中，display_array函数内又用const重新定义了同名的局部变量，二者是完全独立的DOM元素，修改全局变量的样式自然不会生效
• 输入框的取值应该用value属性，你用innerText读取永远是空值，判断条件逻辑完全失效
• 你给添加按钮重复绑定了两次点击事件，原有逻辑已经会触发添加todo、重新渲染列表的操作，额外绑定的事件修改的是无用的全局变量，没有任何实际作用
• 空输入时split会得到包含空字符串的数组，直接push进列表会生成空的todo项，对应的告警也会被渲染出来

步骤1：删除无效代码 #

删除以下两段完全没用的代码：

// 这段全局声明的元素从未被插入DOM，直接删除
const todo_alarm_div = document.createElement('div')
todo_alarm_div.classList.add("Alert", "alertContaner")

以及后面重复绑定的点击事件代码：

// 这段逻辑完全无效，直接删除
btn.addEventListener('click',function(){
  if (input.innerText === '') {
    todo_alarm_div.style = 'display: none'
}else{
  if(input.innerText !== ''){
    todo_alarm_div.style = 'display: block'
  }
}})

步骤2：修改添加逻辑，先校验输入 #

修改add_element_to_array函数，输入为空直接终止执行，同时过滤掉拆分后的空字符串：

function add_element_to_array() {
  const inputVal = document.getElementById("text1").value.trim()
  // 输入为空直接返回，不执行任何添加、渲染逻辑
  if(!inputVal) return
  let splits = inputVal.split(",");
  // 过滤掉拆分后的空字符串，避免生成空todo
  const validSplits = splits.filter(item => item.trim() !== '')
  if(validSplits.length === 0) return
  for (let i = 0; i < validSplits.length; i++) {
    notesArray.push(validSplits[i].trim());
  }
  document.getElementById("text1").value = "";
  display_array();
}

步骤3（可选）：指定单个todo告警隐藏 #

如果有需求要单独隐藏某一个todo的告警，直接在display_array创建todo_alarm_div的时候设置样式即可，每个元素是独立的，不会影响其他已有的告警：

// 在display_array的循环内创建todo_alarm_div后添加逻辑
const todo_alarm_div = document.createElement('div')
todo_alarm_div.classList.add("Alert", "alertContaner");
// 可根据业务条件判断是否隐藏当前todo的告警
if(notesArray[i] === '需要隐藏的内容'){
  todo_alarm_div.style.display = 'none'
}

修改完成后，输入框为空时点击添加按钮不会生成任何新的todo和告警，也不会影响已有的todo项展示。

内容的提问来源于stack exchange，提问作者Brodie.The.Athlete