Why am I getting errors with my JavaScript?
Question
I am trying to practice JavaScript with basic DOM manipulation but I keep getting 2 errors:
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>
3 answers
solution1
2 2017-11-13 18:39:24
your error is here:
var height = document.body.getElementById('hover1').style.height: 500px;
var width = document.body.getElementById('hover1').style.width: 500px;
// -------------------^ and -------------------------------------^
replace those lines with these:
var height = document.getElementById('hover1').style.height;
var width = document.getElementById('hover1').style.width;
solution2
1 2017-11-13 18:41:55
There is nothing called document.body.getElementById instead change this to document.getElementById use as below
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>
solution3
0 2017-11-13 18:43:07
If you are going to set the height of the element and assign the height to var height then you need to do the following:
var height = document.getElementById("size1").style.height = "500px";
If you are going to just assign the height of the element to var height then you need to do the following:
var height = document.getElementById("size1").style.height;
If you are just going to set the height of the element then you just need to do:
document.getElementById("size1").style.height = "500px";
You should also make your 500px with quotes as numbers do not need " " around them but once you add text...it all becomes text. So either way you should have "500px"
I would also make your button into this:
<button type="button" value="size" onclick="size()">Size</button>
Based on a belief that you are trying to make the div larger onclick of Size button then you should have the following:
Style
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";
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.