Javascriptを使用してフォームを入力する例(待機事項リスト)

23081 ワード
JavaScript テキストリンク
Javascriptを使用してフォームを入力する例
入力フォームにやるべきことを書き、追加ボタンをクリックすると、やるべきことを追加できます.
毎日前にチェックボックスがあります.チェックボックスを選択すると、取り消し線が表示されます.
すべての事の横にすべてボタンを取り除くことがあって、ボタンを押して、事は取り除くことができます
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const h1 = document.createElement('h1')
      h1.textContent = '할 일 목록'
      document.body.appendChild(h1)

      const input = document.createElement('input')
      document.body.appendChild(input)

      const addButton = document.createElement('button')
      document.body.appendChild(addButton)
      addButton.textContent = '추가하기'
      
      addButton.addEventListener('click', () => {
          if (input.value !== ''){
          const div = document.createElement('div')
          document.body.appendChild(div)

          const checkbox = document.createElement('input')
          checkbox.type = 'checkbox'
          checkbox.addEventListener('change', () => {
            if(checkbox.checked){
              div.style.textDecoration = 'line-through'
            } else {
              div.style.textDecoration = ''
            }
            
          })
          div.appendChild(checkbox)

          const span = document.createElement('span')
          span.textContent = input.value
          input.value = ''
          div.appendChild(span)

          const deleteButton = document.createElement('button')
          deleteButton.textContent = '제거하기'
          deleteButton.addEventListener('click', () =>{
             div.parentNode.removeChild(div)
          })
          div.appendChild(deleteButton)
        } else {
          alert('내용을 입력해주세요')
        }
      })
    })
  </script>
</head>
<body>

</body>
</html>

タスクの完了後にEnterキーを押して入力する場合は、inputに次のように入力します.
アクティビティリース
それは2回作業を追加するコードを書くので、作業を追加するコードを関数にしましょう.
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const addTodo = () => {
        if (input.value !== ''){
          const div = document.createElement('div')
          document.body.appendChild(div)

          const checkbox = document.createElement('input')
          checkbox.type = 'checkbox'
          checkbox.addEventListener('change', () => {
            if(checkbox.checked){
              div.style.textDecoration = 'line-through'
            } else {
              div.style.textDecoration = ''
            }
            
          })
          div.appendChild(checkbox)

          const span = document.createElement('span')
          span.textContent = input.value
          input.value = ''
          div.appendChild(span)

          const deleteButton = document.createElement('button')
          deleteButton.textContent = '제거하기'
          deleteButton.addEventListener('click', () =>{
             div.parentNode.removeChild(div)
          })
          div.appendChild(deleteButton)
        } else {
          alert('내용을 입력해주세요')
        }
      }

      const h1 = document.createElement('h1')
      h1.textContent = '할 일 목록'
      document.body.appendChild(h1)

      const input = document.createElement('input')
      document.body.appendChild(input)

      input.addEventListener('keyup', (event) => {
        const Enter = 13
        if (event.keyCode == Enter){
          addTodo()
        }
      })

      const addButton = document.createElement('button')
      document.body.appendChild(addButton)
      addButton.textContent = '추가하기'
      
      addButton.addEventListener('click', () => {
          addTodo()
      })
    })
  </script>
</head>
<body>

</body>
</html>
ちなみにEnterのキーコードは13
上のようにaddTodoという関数を作成すると、コードが簡潔になります
白駿-2493:タワー[ジャワ]
How to select the first least max top N rows from each group in SQL