외부 JS를 사용하여 숨겨진 정보 표시

사용자 입력 유효성 검사가 수행 중입니다. 지금은 이름이 적어도 6 자 이상인지 확인하기 위해 이름 확인 만하고 있습니다. 더 많은 유효성 검사를 추가 할 것이지만이 경우에도 오류를 표시 할 수는 없습니다. 스크립트가 HTML 페이지에 있으면 작동하지만 외부에 추가해야 할 항목이 많기 때문에 외부에서 원합니다.외부 JS를 사용하여 숨겨진 정보 표시

HTML 페이지의 js 태그 사이에 js가있을 때 작동합니다 : 6 자 미만인 경우 CSS "txtNameError"로 숨김을 표시합니다.

extrernal .js 파일에 js가있을 때 작동하지 않습니다. 6 자 미만인 경우에는 표시가 변경되지 않습니다.

그러나 코드는 동일합니까? 내 기능이 아래에 태그가 있다면 그것은 작동,

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title>Registration Form</title> 
    <link type="text/css" rel="stylesheet" href="week12.css" /> 
    <script type="text/javascript" src="validate.js"></script> 
</head> 
<body> 

<div class="form"> 
    <table> 
    <tr> 
     <td><input type="text" name="txtName" id="txtName" placeholder="Name" /></td> 
     <td><p class="error" id="txtNameError">Name must be at least 6 characters long.</p></td> 
     <!--The p class "error" is set to hidden visibility using the CSS page. If they don't meet the requirements, then "txtNameError" becomes visible.--> 
    </tr> 
    <!--OTHER USER INPUT, THAT I'M NOT YET INCLUDING (just working on the name part now)--> 
    <tr> 
     <td><button onclick="validateForm();">Register</button></td> 
    </tr> 
    </table> 
</div> 

</body> 
</html>

는 여기에 "이름 부분"에 대한 기본 HTML이다가 txtNameError를 볼 수 있습니다. 하지만 validate.js에 함수를 추가하면 전혀 작동하지 않습니다. 나는 HTML 페이지에있을 때 그것이 자신의 validate.js에 때

<script> 
    function validateForm() { 
     var name = document.getElementById('txtName').value; 
     var nameLength = name.length; 
     if (nameLength < 6) { 
      document.getElementById("txtNameError").style.visibility = "visible"; 
     } 
    } 
</script>

, 나는, 태그를 포함, 나는 스크립트 태그를 포함하지 않습니다.

출처

2014-11-11 adecker0033

디버깅 할 때 함수가 전혀 호출되지 않습니까? 자바 스크립트 콘솔에 오류가 있습니까? 디버거에서 코드를 실행하면 어디에서 구체적으로 실패합니까? 요소가 발견 되었습니까? 그들의 속성이 설정되어 있습니까? – David

'fucntion validateForm()'은 단지 오타가 되었습니까? 아니면 실제로 코드가 그것을 말하고 있습니까? –

메모장 ++를 사용하고 있습니다. 하지만 javascriptlint.com에서 코드를 확인하려고 시도했지만 오류가 발생하지 않습니다. – adecker0033

스크립트에서 함수의 철자가 잘못되었습니다.

또한 html로 제거하십시오. onclick 속성에서. 나를 위해 오류를 정리 한 것 같습니다.

function validateForm() { 
     var name = document.getElementById('txtName').value; 
     var nameLength = name.length; 
     if (nameLength < 6) { 
      document.getElementById("txtNameError").style.visibility = "visible"; 
     } 
    }

및

<td><button onclick="validateForm();">Register</button></td>

당신이 그들을 필요로하는 경우 I는 HTML 요소에 쉽게 검사에 대한 jQuery를 사용하여 설치를 다시 썼다 그러나 자바 스크립트 I에있을 또한 <td><button onclick="validateForm()">Register</button></td>

해야한다 다시 써서 다시 볼 수 있습니다. 여기에서 업데이트 된 jsfiddle를 확인하십시오. http://jsfiddle.net/dhershman/365r5tg5/1/

출처

2014-11-11 15:34:00 dhershman

나는 그 코드를 반으로 타이핑하는 오타였다. 문제가있는 코드를 넣었 기 때문이다. 그것은 내 파일에서 그렇게 좋아하지 않습니다. 나는 세미 콜론을 꺼내고 여전히 운이 없다. – adecker0033

이 스크립트가 수행해야하는 작업은 여기에 표시된 작업에서 실행 된 함수가 다른 작업을 수행하기 위해 스크립팅되지 않은 것입니다. – dhershman

입력이 6 자 미만인 경우 스크립트는 txtNameError를 표시합니다. txtNameError는 CSS를 사용하여 숨겨져 있습니다. 스크립트가 HTML 페이지에있을 때 6 자 미만이 입력되면 오류를 표시합니다. 외부 파일에있을 때 6 자 미만이 표시되면 아무 것도 수행하지 않습니다. – adecker0033

알아 냈어!

HTML 페이지에서 가져 오는 다른 변수 중 하나는 완전히로드되기 전에 페이지에서 끌어 내려고하는 중 하나입니다. 내가 그것을 제거하고 그것을 작동, 외부. js 파일을 사용합니다.

변수를 재배치/재실행 할 예정이므로 잘하면 그 문제는 없습니다.

모두에게 도움을 주셔서 감사합니다. :)

출처

2014-11-11 15:52:01 adecker0033

외부 JS를 사용하여 숨겨진 정보 표시

답변

관련 문제