2017-11-13 28 views
0

私は基本的なDOM操作でJavaScriptを実践しようとしていますが、私は2つのエラー得続ける:あなたのエラーはここにある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と呼ばれるものは、要素の高さを設定しての高さを割り当てるしようとしている場合は、代わり

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

以下のようにdocument.getElementById使用に変更はありませんvar height次に、以下を実行する必要があります。

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

あなたはちょうどあなたが次のことを行う必要があり、その後var heightに要素の高さを割り当てるしようとしている場合:

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

あなただけの要素の高さを設定しようとしているなら、あなたはただ行う必要があります:

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

あなたはまた、彼らの周り" "を必要としない数字として引用符であなたの500pxをしなければならないが、テキストを追加したら...それはすべてのテキストになります。だから、どちらかの方法は、あなたが"500px"

を持っている必要があり、私もこれにあなたのボタンになるだろう:

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

あなたがSizeボタンのdivの大きい方のonclickをしようとしているという信念に基づいて、あなたは以下を持っている必要があります:

スタイル

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> 

はJavaScript

function size() { 
    document.getElementById('size1').style.height = "500px"; 
    document.getElementById('size1').style.width = "500px"; 
} 
関連する問題