2017-11-13 8 views
0

나는 기본 DOM 조작과 자바 스크립트를 연습하려고하지만 난이 오류가 계속 :JavaScript로 왜 오류가 발생합니까?

1.SyntaxError: missing ; before statement

2.TypeError: size is not a function

function size() { 
 
    var height = document.body.getElementById('hover1').style.height: 500 px; 
 
    var width = document.body.getElementById('hover1').style.width: 500 px; 
 
} 
 
console.log(hover);
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>javascript practice</title> 
 
    <meta charset="utf-8" /> 
 
    <style> 
 
    body { 
 
     margin: 7em auto; 
 
     background-color: green; 
 
     width: 90%; 
 
    } 
 
    
 
    #size1 { 
 
     background-color: blue; 
 
     width: 150px; 
 
     height: 150px; 
 
     margin: 3em auto; 
 
    } 
 
    </style> 
 
</head> 
 
<body> 
 
    <div id="size1"></div> 
 
    <input type="button" value="size" onclick="size();"> 
 
</body>

+0

참고 :''태그 사용하거나 닫는 슬래시를 필요로하고있다 결코하지 않습니다. – Rob

답변

2

당신의 오류가 여기에 있습니다 :

var height = document.body.getElementById('hover1').style.height: 500px; 
var width = document.body.getElementById('hover1').style.width: 500px; 
// -------------------^ and -------------------------------------^ 

것은 그 라인 교체를 다음 :

var height = document.getElementById('hover1').style.height; 
var width = document.getElementById('hover1').style.width; 
+0

document.body.getElementById가 정확하지 않습니다. document.getElementById가되어야합니다. –

+0

@assembler, 안녕하세요. 사이트 작동 방식을 이해하려면 [둘러보기] (http://stackoverflow.com/tour)를 방문하십시오. "고맙습니다."라는 코멘트는 권장하지 않습니다. – isherwood

+0

@sumeetkumar 본문을 사용하면 오류가 없습니다. – Rob

1

document.body.getElementById 대신 document.getElementById 사용으로 변경이라는 것은 당신이 요소의 높이를 설정하는 높이를 지정하려는 경우

var height = (document.getElementById('hover1'))?document.getElementById('hover1').style.height: "500px"; 
var width = (document.getElementById('hover1'))?document.getElementById('hover1').style.width: "500px"; 

function size1() { 
 
console.log("test") 
 
var height = (document.getElementById('hover1'))?document.getElementById('hover1').style.height: "500px"; 
 
var width = (document.getElementById('hover1'))?document.getElementById('hover1').style.width: "500px"; 
 

 
} 
 

 

 

 
    //console.log(hover);
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>javascript practice</title> 
 
<meta charset="utf-8"/> 
 

 
<style> 
 

 
    body { 
 
    margin: 7em auto; 
 
    background-color: green; 
 
    width: 90%; 
 
    } 
 

 
    #size1 { 
 
    background-color: blue; 
 
    width: 150px; 
 
    height: 150px; 
 
    margin: 3em auto; 
 
    } 
 

 
</style> 
 
    </head> 
 
    <body> 
 

 
<div id="size1"> 
 

 

 

 
</div> 
 

 
    <input type="button" value="size" onclick="size1()"> 
 

 
    </body>

+0

이 작업은 실행되지 않습니다. – Matt

+0

실행되지 않는 것은 무엇입니까?오류를 말해 –

+0

그 기능에서 본문을 사용하는 것은 오류가 아닙니다. – Rob

0

다음과 같이 없다 var height 다음을 수행해야합니다.

var height = document.getElementById("size1").style.height = "500px"; 
그냥 다음 요소의 높이를 설정하려는 경우

var height = document.getElementById("size1").style.height; 

방금 ​​수행해야합니다 그냥 var height에 요소의 높이를 지정하려는 경우

는 다음을 수행해야 :

document.getElementById("size1").style.height = "500px"; 

또한 주변 " " 필요하지 않습니다 번호와 같은 따옴표로 500px을해야하지만 텍스트를 추가하면 ... 모든 텍스트가된다. 그래서 어느 쪽이든 당신은 "500px"

내가이로 버튼을 만들 것해야한다 : 당신은 당신이 다음을 가져야한다 Size 버튼의 DIV 큰 onclick을 만들려고 노력하는 믿음을 바탕으로

<button type="button" value="size" onclick="size()">Size</button> 

:

스타일

body { 
    margin: 7em auto; 
    background-color: green; 
    width: 90%; 
} 

#size1 { 
    background-color: blue; 
    width: 150px; 
    height: 150px; 
    margin: 3em auto; 
} 

HTML

<div id="size1"></div> 

<button type="button" value="size" onclick="size()">Size</button> 

자바 스크립트

function size() { 
    document.getElementById('size1').style.height = "500px"; 
    document.getElementById('size1').style.width = "500px"; 
}