>

아래와 같은 형식으로 입력 값의 개체를 작성하려고 시도한 다음 해당 개체를 콘솔에 기록합니다. 하지만 값이 제대로 검색되지 않습니다.

코드에 어떤 문제가 있습니까?

document.getElementById('myForm').addEventListener('submit', contactPerson);
function contactPerson(e) {
  var personName = document.getElementsByClassName('personName').value;
  var personEmail = document.getElementsByClassName('personEmail').value;
  var personMessage = document.getElementsByClassName('personMessage').value;
  var contact = {
    name: personName,
    email: personEmail,
    message: personMessage
  }
  console.log(contact);
  e.preventDefault();
}

<form id="myForm">
  <label for="inputHorizontalSuccess">Name</label>
  <input type="text" class="form-control form-control-success" id="inputHorizontalSuccess" class="personName" placeholder="Name"><br>
  <label for="inputHorizontalSuccess">Email</label>
  <input type="email" class="form-control form-control-success" id="inputHorizontalSuccess" class="personEmail" placeholder="name@example.com"><br>
  <label for="inputHorizontalSuccess">Message</label>
  <input type="text" class="form-control form-control-success" id="inputHorizontalSuccess" class="personMessage" placeholder="Your Message"><br>
  <button type="submit">Submit</button>
</form>


  • 답변 # 1

    여러 ID가 있습니다 :

    <input type="text" class="form-control form-control-success" id="inputHorizontalSuccess" id="personName" placeholder="Name">
    
    

    inputHorizontalSuccess 를 제거 할 수 있습니다 .

    또는 name 추가   inputHorizontalSuccess 가 있어야하는 경우 대신 가치를 얻으십시오. .

    해야 할 일 :

    <input type="text" class="form-control form-control-success" id="inputHorizontalSuccess1" name="personName" placeholder="Name">
    <input type="email" class="form-control form-control-success" id="inputHorizontalSuccess2" name="personEmail" placeholder="name@example.com">
    <input type="text" class="form-control form-control-success" id="inputHorizontalSuccess3" name="personMessage" placeholder="Your Message">
    
    var personName = document.querySelector('[name="personName"]').value;
    var personEmail = document.querySelector('[name="personEmail"]').value;
    var personMessage = document.querySelector('[name="personMessage"]').value;
    
    

    DOM으로부터 가치를 얻는 방법에 대한이 질문을 읽는 것이 좋습니다. JavaScript를 사용하여 텍스트 입력 필드의 값을 얻으려면 어떻게합니까?

  • 답변 # 2

    요소 정의의 첫 번째 클래스 속성 만 적용됩니다. 이것은 다음을 쓸 때 의미합니다.

    <input type="text"class="form-control form-control-success"...class="personName"placeholder="Name">
    
    

    나중에 "class"속성은 적용되지 않습니다. 이는이 클래스에서 요소를 선택할 수 없음을 의미합니다.

    Document.getElementsByClassName  라이브 HTMLCollection 를 반환  단일 요소 만있는 경우에도 마찬가지입니다. 이것은 다음과 같이 쓸 때 의미합니다 :

    var personName = document.getElementsByClassName('personName').value;
    
    

    와이즈 비즈는 없다  라이브 value 의 속성   HTMLCollection 에 대한 호출에 의해 반환 정의되지 않은 상태로 반환됩니다.

    Document.getElementsByClassName
    
    
    document.getElementById('myForm').addEventListener('submit', contactPerson);
    function contactPerson(e) {
      var personName = document.getElementsByClassName('personName')[0].value;
      var personEmail = document.getElementsByClassName('personEmail')[0].value;
      var personMessage = document.getElementsByClassName('personMessage')[0].value;
      var contact = {
        name: personName,
        email: personEmail,
        message: personMessage
      }
      console.log(contact);
      e.preventDefault();
    }
    
    

    그러나, 당신은 아마 클래스와 <form id="myForm"> <label for="inputHorizontalSuccess">Name</label> <input type="text" class="form-control form-control-success personName" id="inputHorizontalSuccess" placeholder="Name"><br> <label for="inputHorizontalSuccess">Email</label> <input type="email" class="form-control form-control-success personEmail" id="inputHorizontalSuccess" placeholder="name@example.com"><br> <label for="inputHorizontalSuccess">Message</label> <input type="text" class="form-control form-control-success personMessage" id="inputHorizontalSuccess" placeholder="Your Message"><br> <button type="submit">Submit</button> </form> 대신 ID를 사용해야합니다 충돌을 피하려면 :

    Element#querySelector
    
    
    document.getElementById('myForm').addEventListener('submit', contactPerson);
    function contactPerson(e) {
      var personName = document.querySelector('#personName').value;
      var personEmail = document.querySelector('#personEmail').value;
      var personMessage = document.querySelector('#personMessage').value;
      var contact = {
        name: personName,
        email: personEmail,
        message: personMessage
      }
      console.log(contact);
      e.preventDefault();
    }
    
    

    <form id="myForm"> <label for="inputHorizontalSuccess">Name</label> <input type="text" class="form-control form-control-success" id="personName" placeholder="Name"><br> <label for="inputHorizontalSuccess">Email</label> <input type="email" class="form-control form-control-success" id="personEmail" placeholder="name@example.com"><br> <label for="inputHorizontalSuccess">Message</label> <input type="text" class="form-control form-control-success" id="personMessage" placeholder="Your Message"><br> <button type="submit">Submit</button> </form>

  • 이전 MySQL 데이터베이스에 연결하려고 할 때 PHP 오류
  • 다음 react native - 경로 동작을 구현해야하지만 방법을 모름