요소가 CSS에 의해 숨겨져 있고 사용자가 입력 된 값을 프롬프트에 입력 한 후 표시하고 싶습니다. 나는 비슷한 방법으로 검색을 시도했지만 내 방식은 효과가 없다.숨겨진 요소를 표시하는 자바 스크립트
app.js
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<h1 id="heading">Heading</h1>
<div id="standard"> <input type="radio" name="standard">1 <input type="radio" name="standard">2 </div>
</body>
</html>
var firstName = prompt('Please enter your first name');
var secondName = prompt('Please enter your second name');
if (firstName && secondName != ' ') {
var x = document.getElementById('standard');
x.style.display = "block";
} else {
alert('please enter first and second name');
}
tut.html 아래 스크립트 파일을 포함합니다. 문제는 DOM 전에로드 된 스크립트입니다. 귀하의 솔루션은 here입니다.
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1 id="heading">Heading</h1>
<div id="standard">
<input type="radio" name="standard">1
<input type="radio" name="standard">2
</div>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
귀하의 자바 스크립트 코드는 좋아요. 약간 결함이있는 유일한 것은 if 문이지만 어쨌든 그것을 트리거해야합니다. 이 검사가 효과가 있습니까?
var firstName = prompt('Please enter your first name');
var secondName = prompt('Please enter your second name');
if (firstName != '' && secondName != ''){
var x = document.getElementById('standard');
x.style.display = "block";
}
else{
alert('please enter first and second name');
}#standard { display: none; }<html>
<head></head>
<body>
<h1 id="heading">Heading</h1>
<div id="standard">
<input type="radio" name="standard">1
<input type="radio" name="standard">2
</div>
</body>
</html>1) 신체의 끝 부분에 app.js 장소 :
를 해결하려면, 당신은 두 가지 옵션이 있습니다.
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1 id="heading">Heading</h1>
<div id="standard">
<input type="radio" name="standard">1
<input type="radio" name="standard">2
</div>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
2) 그렇지 않으면 윈도우 부하에 JS 코드를 넣을 수 있습니다 :
window.onload = function() {
var firstName = prompt('Please enter your first name');
var secondName = prompt('Please enter your second name');
if (firstName != '' && secondName != ''){
var x = document.getElementById('standard');
x.style.display = "block";
}
else{
alert('please enter first and second name');
}
};
이것은 당신의 코드가 작동해야합니다. 후자의 방법이 바람직하다.
문제는 자바 스크립트 if 문에 있습니다. 이 광고를 봐 : 가변 firstName가 정의되고 변수는 secondName' ' 동일 여부
if (firstName && secondName != ' ') {
이 줄 체크한다. 두 변수가 ' '이 아닌지 확인해야합니다. 다음으로 ' '을 사용하지 마십시오. 그렇게하면 사용자는 프롬프트 상자를 비워 둘 수 있으며 if 문은 양수입니다. 대신, 사용자가 문자 (A-Z 또는 A-Z)를 입력 여부를 확인 :
var firstName = prompt('Please enter your first name');
var secondName = prompt('Please enter your second name');
var patt = /[abcdefghijklmnopqrstuvwxyz]/ig;
if (firstName.search(patt) != -1 && secondName.search(patt) != -1) {
var x = document.getElementById('standard');
x.style.display = "block";
} else {
alert('please enter first and second name');
}
당신은 또한 HTML 문서의 끝 부분에 <script> 태그를 배치해야합니다. 그렇지 않은 경우 DOM 메서드 document.getElementById()은 정의되지 않은 값을 반환합니다. 당신이 두 가지 방법으로 할 수 있도록 html로로드되기 전에 스크립트를 호출하기 때문에
이것은 코드의 의미를 수정할 수도 있지만 이것은 "그다지"문제가 아니다. – Xufox
그 자체로는 작동하지 않습니다. 그의 문제는 JS가
에 있기 때문에 요소가 페이지에로드되지 않고 DOM 준비가되면로드되지 않는다는 것입니다. – nitobuendia실제로'undefined '가 아닌'null'을 반환합니다. – Xufox
당신은 div 요소를 볼 수 없습니다 :
호출 app.js 하단
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1 id="heading">Heading</h1>
<div id="standard">
<input type="radio" name="standard">1
<input type="radio" name="standard">2
</div>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
에서 유지 html과 애플 리케이션을 수정합니다.같은 window.onload를 호출하여 JS 그래서
var firstName = prompt("Please enter your first name");
var secondName = prompt("Please enter your second name");
function init(){
if (firstName && secondName != ' ') {
var x = document.getElementById('standard');
x.style.display = "block";
} else {
alert('please enter first and second name');
}
}
window.onload = init;
는 CSS를 코딩 .. –
#standard을 {포함 \t 디스플레이 : 없음; } – srs
[브라우저 콘솔 (dev tools)] (http://webmasters.stackexchange.com/q/8525) ('F12')을 클릭하고 오류를 읽습니다. – Xufox