JQuery not appending div tag with attributes from a JS function object
Question
I'm trying to print out a block onto the browser window using JQuery. I made the block attributes into a JS object class via function. In this code I am using the "use strict"; method.
The HTML(5):
<!DOCTYPE html>
<html><TITLE>Logo Experiment</TITLE>
<head>
<!--adding JQuery library-->
<!--this is a DESKTOP JQuery, so this will not work much on the modern androids-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!--setting charset to utf-8 unicode in case symbols are needed-->
<meta charset="utf-8">
</head>
<style>
body {
display: block;
}
.bx { /* the box... */
background-image: url("metal.png");
background-size: cover;
background-color: #333333; /* in case the image fails to load */
border-width: 1.5px;
border-radius: 6px;
border-style: solid;
border-color: #222222;
box-shadow: 2px 2px 2px #111111;
}
</style>
<body>
<script>
//the script below
</script>
</body>
</html>
The JS/JQuery:
"use strict";
function Box(width, height, style) {//box object
width = this.width;
height = this.height;
style = this.style;
};
var lbx = new Box(256, 256, "bx"); //"lbx" is "logo box"
$(document).ready(function(){//appending a div to the <body> tag directly
$("<div class='" + lbx.style + "' style='width:" + lbx.width + "px;height:" + lbx.height + "px;'>").appendTo("body");
});
Whenever I try to append the block with JQuery using the JS object attributes, I end up with this output: <div class="undefined" style="width:undefinedpx;height:undefinedpx;"></div>
Any help is much appreciated.
Sincerely, CA1K.
1 answers
solution1
2 ACCPTED 2015-09-05 23:19:55
You got it backwards here. It should be this.parameter = paramter :
function Box(width, height, style) {//box object
width = this.width;
height = this.height;
style = this.style;
};
Like this:
function Box(width, height, style) {//box object
this.width = width;
this.height = height;
this.style = style;
};
The first way does nothing other than setting the call arguments to undefined (since none of the properties there are defined).
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.