Thoughts on the preferred position of a statement intended to remove existing DIV content

I’m just running through an exercise on extending objects in a JS tutorial book. I’ve modified the script presented slightly to very clearly indicate when the JS hasn’t worked without the need to dip into Dev Tools, by adding some text into what would otherwise be an empty DIV. If all works as intended, this added text gets overwritten by the JS.

As shown below, the HTML and JS script actually works fine, but as a point of interest, I was curious about the position of the statement that blanks the added text inside the init function (line 14, or the line that reads panel.innerHTML = "";). It may be semantics, and I know the exercise as presented isn’t exactly DRY, but I was wondering if that statement might be better placed elsewhere, and what the reasons for that might be.

The JavaScript

function Car( make, model, colour ) {
  this.make = make;
  this.model = model;
  this.colour = colour;
}

function init() {
  var panel = document.getElementById( "panel" );
  var myCar = new Car( "Ford", "Puma", "Black" );

  Car.prototype.doors = 3;
  Car.prototype.registration = "Y97 DBV";

  panel.innerHTML = "";

  for ( property in myCar ) {
    if( myCar[property] !== "") {
      panel.innerHTML += (property + ": " + myCar[property] + "<br>");
    }
  }
  panel.innerHTML += "<hr>";

  myCar.make = "Dodge";
  myCar.model = "Durango";
  myCar.colour = "Blue";
  myCar.doors = 5;
  myCar.registration = "6451 JNA";

  for ( property in myCar ) {
    if( myCar[property] !== "") {
      panel.innerHTML += (property + ": " + myCar[property] + "<br>");
    }
  }

}
document.addEventListener( "DOMContentLoaded", init, false );

The HTML

<!DOCTYPE HTML>

<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Extending Objects</title>
    <link type="text/css" rel="stylesheet" href="../css/style.css">
    <script type="text/javascript" src="prototype.js"></script>
  </head>

  <body>
    <div id="main">
      <div id="panel">JavaScript is not enabled/available and this may degrade the viewing experience presented on this webpage</div>
    </div>
  </body>

</html>

style.css for what it’s worth

body {
  font-size: 1.2em;
}

#main {
  margin: 0 auto;
  max-width: 960px;
}

The potential problem I see is that the appending (the += inside the for loops) is repeatedly happening on the element

I would create a new empty variable, append to that, and then set the innerHTML to that variable once when done.

2 Likes

I was kind of aware that the basic code as described probably wasn’t the best. Would I be right in thinking that your approach would also eliminate the need for the statement I added to blank the ‘panel’ DIV?

Yes. The only reason to blank it is so the appends will have a clean slate. By appended to a new variable the innerHTML can be replaced all in one go. No blanking needed.

1 Like

OK, that makes sense. Time for a little refactoring I think.

This works just fine.

function Car( make, model, colour ) {
  this.make = make;
  this.model = model;
  this.colour = colour;
}

function init() {
  var panel = document.getElementById( "panel" );
  var newPanel = ""; // modified from original post to assign a blank value to newPanel
  var myCar = new Car( "Ford", "Puma", "Black" );

  Car.prototype.doors = 3;
  Car.prototype.registration = "Y97 DBV";

  for ( property in myCar ) {
    if( myCar[property] !== "") {
      newPanel += (property + ": " + myCar[property] + "<br>");
    }
  }
  newPanel += "<hr>";

  myCar.make = "Dodge";
  myCar.model = "Durango";
  myCar.colour = "Blue";
  myCar.doors = 5;
  myCar.registration = "6451 JNA";

  for ( property in myCar ) {
    if( myCar[property] !== "") {
      newPanel += (property + ": " + myCar[property] + "<br>");
    }
  }
  panel.innerHTML = newPanel;
}
document.addEventListener( "DOMContentLoaded", init, false );
1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.