홈>
아래와 같은 형식으로 입력 값의 개체를 작성하려고 시도한 다음 해당 개체를 콘솔에 기록합니다. 하지만 값이 제대로 검색되지 않습니다.
코드에 어떤 문제가 있습니까?
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="[email protected]"><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
- 답변 # 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="[email protected]"><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="[email protected]"><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>
트렌드
- OpenCv의 폴더에서 여러 이미지 읽기 (python)
- 파이썬 셀레늄 모든 "href"속성 가져 오기
- html - 자바 스크립트 - 클릭 후 변경 버튼 텍스트 변경
- javascript - 현재 URL에서 특정 div 만 새로 고침/새로 고침
- JSP에 대한 클래스를 컴파일 할 수 없습니다
- JavaScript 변수를 HTML div에 '출력'하는 방법
- git commit - 자식 - 로컬 커밋 된 파일에 대한 변경을 취소하는 방법
- jquery - JavaScript로 현재 세션 값을 얻으시겠습니까?
- javascript - swiperjs에서 정지, 재생 버튼 추가
- python - 화면에서 찾은 요소를 찾을 수없는 경우 셀레늄
여러 ID가 있습니다 :
inputHorizontalSuccess
를 제거 할 수 있습니다 .또는
name
추가inputHorizontalSuccess
가 있어야하는 경우 대신 가치를 얻으십시오. .해야 할 일 :
DOM으로부터 가치를 얻는 방법에 대한이 질문을 읽는 것이 좋습니다. JavaScript를 사용하여 텍스트 입력 필드의 값을 얻으려면 어떻게합니까?