javascript - 如果输入数据为空（JavaScript），我如何返回错误值

Question

因此，如果输入的数据值为空，我会尝试这样做，警报（）的代码会说“你没有写任何东西”，并且在数据值变为 false 之后

let ourForm = document.getElementById("form")
let ourField = document.getElementById("field")
let ourList = document.getElementById("list")
document.body.style.backgroundColor = "lightblue"

let audd = ourForm.addEventListener("submit", (e) => {
  e.preventDefault()
  createItem(ourField.value)
})

if (ourField.value == "") {
  alert('test')
}

function createItem(x) {
  let ourHTML = `<li id="bobo3">${x} <button id="bobo2" onclick="deleteThing(this)">Delete</button></li>`
  ourList.insertAdjacentHTML("beforeend", ourHTML)
  ourField.value = ""
  ourField.focus()
}

function deleteThing(elementToDelete) {
  elementToDelete.parentElement.remove()
}

body {
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}

a #field {
  border: dotted white;
  background-color: lightblue;
  color: black;
  padding: 10px 10px;
}

bobo3 {
  font-family: Arial, Helvetica, sans-serif;
  color: #fff;
}

#list {
  list-style-type: none;
}

#bobo {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 10px 9px;
  text-align: center;
  border-radius: 8px;
  text-decoration: none;
  display: inline-block;
  font-size: 17px;
}

#bobo2 {
  background-color: #ff00ff;
  border: none;
  color: white;
  padding: 3px 3px;
  text-align: center;
  border-radius: 2px;
  text-decoration: none;
  display: inline-block;
  font-size: 15px;
}

<h1>To-Do App by <br><i style=color:#ff00ff;>Félix</i></h1>

<form id="form">
  <input id="field" type="text" autocomplete="off" maxlength="15" placeholder="Type here">
  <br><br>
  <button id="bobo">Create Item</button>
</form>
<h3>Need to do :</h3>
<ul id="list"></ul>

标签： javascripthtml

Answer 1

测试需要在事件监听器中。

let ourForm = document.getElementById("form")
let ourField = document.getElementById("field")
let ourList = document.getElementById("list")
document.body.style.backgroundColor = "lightblue"

let audd = ourForm.addEventListener("submit", (e) => {
  e.preventDefault()
  if (ourField.value == "") {
    alert('You did not write anything')
  } else {
    createItem(ourField.value)
  }
})


function createItem(x) {
  let ourHTML = `<li id="bobo3">${x} <button id="bobo2" onclick="deleteThing(this)">Delete</button></li>`
  ourList.insertAdjacentHTML("beforeend", ourHTML)
  ourField.value = ""
  ourField.focus()
}

function deleteThing(elementToDelete) {
  elementToDelete.parentElement.remove()
}

body {
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}

a #field {
  border: dotted white;
  background-color: lightblue;
  color: black;
  padding: 10px 10px;
}

bobo3 {
  font-family: Arial, Helvetica, sans-serif;
  color: #fff;
}

#list {
  list-style-type: none;
}

#bobo {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 10px 9px;
  text-align: center;
  border-radius: 8px;
  text-decoration: none;
  display: inline-block;
  font-size: 17px;
}

#bobo2 {
  background-color: #ff00ff;
  border: none;
  color: white;
  padding: 3px 3px;
  text-align: center;
  border-radius: 2px;
  text-decoration: none;
  display: inline-block;
  font-size: 15px;
}

<h1>To-Do App by <br><i style=color:#ff00ff;>Félix</i></h1>

<form id="form">
  <input id="field" type="text" autocomplete="off" maxlength="15" placeholder="Type here">
  <br><br>
  <button id="bobo">Create Item</button>
</form>
<h3>Need to do :</h3>
<ul id="list"></ul>