CODEWITHSUNDEEP
javascripthtmlcss
Yozex
Yozex

Reputation: 73

Javascript var.className do not quite understand it

I am reading JavaScript_and_JQuery_Interactive_Front-End_Web_Development_by_Jon_Duckett, as part of Javascript learning. I am at page 119, adding and removing properties from object. Bellow are the html, js and css files.

I have changed javascript file

elPool.className = "Pool: " + hotel.pool;

was: 

elPool.className = hotel.pool

but it doesn't seem to change output in Firefox.

Questions:

  1. I had to do some thinking to understand the .className thing, and my conclussion is this: var elPool first gets the HTML value of 'pool' element (in this case it's the word 'pool'). And then that element is, through the elPool variable, assigned a new class (because it doesn't have it before). In this case it is a class .true. CORRECT or FALSE conclusion?
  2. In CSS file there is only one joint picture for .true and .false classes. How is that possible when there has to be a cross sign and a cross-check sign, and that are two pictures?
  3. var elGym gets a className false (through elGym.className = hotel.gym;),and accordingly gets CSS adjustion. How is it possible that var elPool gets className true when it has two things added as classNames ("Pool: " and hotel.pool)? Is the "Pool: " part totally ignored, or what is actually the principle here? Thanx all!

HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript &amp; jQuery - Chapter 3: Functions, Methods &amp; Objects - Adding properties</title>
    <link rel="stylesheet" href="css/c03.css" />
  </head>
  <body>
    <h1>TravelWorthy</h1>
    <div id="info">
      <h2>hotel facilities</h2>
      <div id="hotelName"></div>
      <div>
        <p id="pool">Pool</p>
        <p id="gym">Gym</p>
      </div>
    </div>
    <script src="js/adding-and-removing-properties.js"></script>
  </body>
</html>

JS:

// Set up the object
var hotel = {
  name : 'Park',
  rooms : 120,
  booked : 77
};

hotel.gym = false;
hotel.pool = true;
delete hotel.booked;

// Update the HTML
var elName = document.getElementById('hotelName'); // Get element
elName.textContent = hotel.name;                   // Update HTML with property of the object

var elPool = document.getElementById('pool');      // Get element
elPool.className = "Pool: " + hotel.pool;                     // Update HTML with property of the object

var elGym = document.getElementById('gym');        // Get element
elGym.className = hotel.gym;                       // Update HTML with property of the object

CSS:

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

body {
  background-color: #fff;
  background: url("../images/travelworthy-backdrop.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  margin: 0;
  font-family: 'Open Sans', sans-serif;}

h1 {
  background: #1e1b1e url("../images/travelworthy-logo.gif") no-repeat;
  width: 230px;
  height: 180px;
  float: left;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  margin: 0;}

h2 {
  margin: 1.75em 0 0 0;
  color: #adffda; 
  font-weight: normal;}

h2 + p {
  margin: 0.25em 0 0 0;}
p + p {
  margin: 0;}
p + h2 {
  margin: 10px 0 0 0;}

/* message under the logo */

#message {
  float: left;
  clear: left;
  background-color: #ffb87a;
  color: #1e1b1e;
  width:170px;
  padding: 18px 30px;
  text-align: center;}

/* black bar across the right hand side of the page */

#info {
  background-color: #1e1b1e;
  color: #fff;
  width: 200px;
  padding: 0 15px;
  text-align: center;
  min-height: 100%;
  position: absolute;
  top: 0;
  right: 15%;}

/* details in the black bar */

#hotelName {
  text-transform: uppercase;
  text-align: center; 
  font-size: 120%;
  margin-top: 10px;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff; 
  padding: 10px 0;}

#hotel1 {
  margin-top: 1em; 
  border-top: 1px solid #fff; 
  padding-top: 1em;} 
#hotel2 {
  border-bottom: 1px solid #fff; 
  padding-bottom: 1em;}

#rooms {
  font-size: 440%;
  color: #ffb87a;
  display: inline-block;
  margin: 0;}

#roomRate{
  text-decoration: line-through;
  display: inline-block;
  float: left;
  padding-top: 10px;}

#specialRate {  
  font-size: 440%;
  color: #ffb87a;
  display: inline-block;
  padding: 10px 0 20px 0;
  margin: 0;}

#offerEnds {
  text-transform: uppercase;
  color: #ffb87a;
  font-size: 75%;}

.true, .false {
  padding: 0 50px 0 50px;
  line-height: 28px;
  text-align: left;
  background-image: url("../images/check-cross.png");
  background-position: 120px 0;
  background-repeat: no-repeat;}

.false {
  background-position: 120px -28px;}

/* footer */

#footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #adffda;}

#footer p {
  padding: 10px;
  margin: 0;}

.data {
  padding: 10px;}

Upvotes: 0

Views: 151

Answers (1)

Barmar
Barmar

Reputation: 781004

  1. document.getElementById('pool') returns the DOM element, not its text contents. So when you assign to the .className property, you're setting the class of the element, as if it had class="Pool: true" in the HTML.

  2. There's a joint entry in the CSS for .true and .false, but there's also another entry for .false that overrides the background-position style. It's using a CSS sprite: a single image file that contains several pictures at different positions, and the background-position arranges for the appropriate picture to appear depending on the class.

  3. The className is a space-separated list of classes, so "Pool: true" is two classes, Pool: and true. Since there's no CSS for .Pool: (it would have to be written as .Pool\: because : has special meaning in CSS selectors), that class is effectively ignored. I'm not sure why that's in the book, maybe it's an attempt to make the meaning of the classes more obvious in the HTML. IMHO, it would be better to use classes like pool-true and pool-false or pool and nopool.

Upvotes: 2

Related Questions