Question

如果文本字段留空，我会使用此代码添加红色星号。我想要它，以便一旦文档检测到所述文本字段中的输入，星号就会消失。我还想阻止添加更多的星号IF已经有一个星号，文本字段仍为空。我已经尝试运行IF ELSE语句来实现它但却出错。谢谢你的帮助。

const button = document.getElementById('button')
const listdiv = document.querySelector('.listdiv')
var urlinput = document.getElementById('text').value

button.addEventListener('click', function() {
  // Get URL and add it into a link
  let createA = document.createElement('a')
  createA.href = urlinput
  createA.textContent = urlinput

  // Get description and add it to the link
  let descrInput = document.getElementById('description').value
  let strong = document.createElement('strong')
  strong.textContent = descrInput

  if (urlinput.trim() !== '') {
    listdiv.appendChild(strong)
    listdiv.appendChild(createA)
  } else {
    var ast = document.querySelector('.ast')
    var createAst = document.createTextNode('*')
    text.style.border = '1px solid #ff0000'
    ast.style.color = '#ff0000'
    ast.appendChild(createAst)
  }
})

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="style.css" rel="stylesheet" type="text/css">
  <title>Meine Testseite</title>
</head>

<body>

  <div class="formdiv">
    <form>
      <input type="text" name="" placeholder="Enter URL" id="text" autofocus>
      <div class="ast"></div>
      <input type="text" name="" placeholder="Link description" id="description">
      <input type="button" value="Add" class="button" id="button">
    </form>
  </div>

  <div class="listdiv">

  </div>

  <script src="js.js"></script>
</body>

</html>

Answer 1

仅仅是个人偏好，但我可能会转而使用if语句来更好地处理问题：

如果该字段为空并且没有已显示的星号，则添加星号; （可选）如果字段为空并且有星号，则为else;否则，如果该字段不是空白。

您可以使用document.querySelector('.ast').innerHTML之类的内容获取星号div的值，然后将其包含在if语句中：

if (urlinput.trim() === '' && document.querySelector('.ast').innerHTML === "") { 
  add an asterisk 
} else if (urlinput.trim() === '' && document.querySelector('.ast').innerHTML === "*" {
  don't add an asterisk 
} else {
  appendChild as you've already got them
}

这个解决方案的诀窍在于，如果页面上有1个星号字段，它才会真正起作用。根据你的问题，这个假设成立了。如果这是一个不好的假设，请告诉我。

空文本字段生成多个星号

1 个答案: