"Build a Game with Sprite Kit" was retired on May 31, 2020.

Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Rebecca Eilering
Rebecca Eilering
15,480 Points

Im sure this this...Is there a better way to code the javascript for this page?

I'm sure there is but I can't think of how I can. I'm really bad at this. Though I am trying.... This is the html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Clicky Thing</title>
      <link rel="stylesheet" href="css/normalize.css">
      <link rel="stylesheet" href="css/design.css">  
  </head>
  <body>
    <div id="wrapper">
      <section>
        <div class="row">
          <h1>Clicky Thing</h1>
        </div>
      </section>
      <section>
        <div class="row">
          <ul id="click-boxes">
            <li id="item1" class="squares"><a onclick="displayA()">Click</a></li>
            <li id="item2" class="squares"><a onclick="displayB()">Click</a></li>
            <li id="item3" class="squares"><a onclick="displayC()">Click</a></li>
            <li id="item4" class="squares"><a onclick="displayD()">Click</a></li>
            <li id="item5" class="squares"><a onclick="displayE()">Click</a></li>     
            <li id="item6" class="squares"><a onclick="displayF()">Click</a></li>
            <li id="item7" class="squares"><a onclick="displayG()">Click</a></li>
            <li id="item8" class="squares"><a onclick="displayH()">Click</a></li>
            <li id="item9" class="squares"><a onclick="displayI()">Click</a></li>
          </ul>
        </div>
        <div class="row">
          <a href="#" class="btn-success" id="refreshPage">Refresh</a>
          <a href="#" class="btn-success" id="something-else">Do Something</a>

        </div>
      </section>
    </div>
    <script src="js/app.js"></script>
  </body>
</html>

The javascript:

function displayA(){
  document.getElementById("item1").innerHTML = "A";
}

function displayB(){
  document.getElementById("item2").innerHTML = "B";
}

function displayC(){
  document.getElementById("item3").innerHTML = "C";
}

function displayD(){
  document.getElementById("item4").innerHTML = "D";
}

function displayE(){
  document.getElementById("item5").innerHTML = "E";
}

function displayF(){
  document.getElementById("item6").innerHTML = "F";
}

function displayG(){
  document.getElementById("item7").innerHTML = "G";
}

function displayH(){
  document.getElementById("item8").innerHTML = "H";
}

function displayI(){
  document.getElementById("item9").innerHTML = "I";
}

//Refresh Button

document.getElementById("refreshPage").onclick = function() {
  refreshPage()
};
function refreshPage() {
  location.reload();;
}

//Do Something Button

document.getElementById("something-else").onclick = function() {
  doSomething()
};
function doSomething() {
  document.getElementById("something-else").innerHTML = "Something Else";
}

2 Answers

Victor Rodriguez
Victor Rodriguez
15,015 Points
Victor Rodriguez
Victor Rodriguez
15,015 Points

Well there are a few things we can do to make this work a little easier. The first approach is to make a single modular function.

    function display(whatToDisplay, elementToDisplayItIn) {
        elementToDisplayItIn.innerHTML = whatToDisplay;
    }

Then we can use this in the html like so:

  <li id="item1" class="squares"><a onclick="display('a', this)">Click</a></li>
  <li id="item2" class="squares"><a onclick="display('b', this)">Click</a></li>
  <li id="item3" class="squares"><a onclick="display('c', this)">Click</a></li>

But this is still too much to to write in my opinion. We can make the html shorter and the javascript better.

    //an array to hold the alphabet
    var alphabet = "abcdefghijklmnopqrstuvwxyz".split("");
    var lis = document.getElementsByTagName('li');
    console.log(lis.length);
    //loop through and attach functions to execute when a click is used
    for (var i = 1; i <= lis.length; i++) {
        var element = document.getElementById('item' + i);
        addClickEvent(element, i);
    }

    function addClickEvent(element, value) {
        var valueToDisplay = alphabet[i - 1];
        //addeventlistener will "listen" for the click "event" and execute the function I passed in.
        element.addEventListener('click', function() {
            this.innerHTML = valueToDisplay;
        });
    }

Now our Javascript and html are completely separate and our code will work for every letter of the alphabet as long as you have 24 li's or less. We don't need an onclick attribute in our html now, because we've attached it to the id.

Rebecca Eilering
Rebecca Eilering
15,480 Points
Rebecca Eilering
Rebecca Eilering
15,480 Points

hmmm... Haven't got that to work yet. I'll try again and keep looking into it.

However, I got the onclick event out of the html and simplified the html in the process. Then was able to simplify the javascript for the Refresh and Do Something buttons at the bottom. Then moved the onclick event that was in the html into the line of js that corresponds with the li Id. I guess that is a tiny victory.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Clicky Thing</title>
      <link rel="stylesheet" href="css/normalize.css">
      <link rel="stylesheet" href="css/design.css">  
  </head>
  <body>
    <div id="wrapper">
      <section>
        <div class="row">
          <h1>Clicky Thing</h1>
        </div>
      </section>
      <section>
        <div class="row">
          <ul id="click-boxes">
            <li id="item1">Click</li>
            <li id="item2">Click</li>
            <li id="item3">Click</li>
            <li id="item4">Click</li>
            <li id="item5">Click</li>     
            <li id="item6">Click</li>
            <li id="item7">Click</li>
            <li id="item8">Click</li>
            <li id="item9">Click</li>
          </ul>
        </div>
        <div class="row">
          <a href="#" class="btn" id="refreshPage">Refresh</a>
          <a href="#" class="btn" id="something-else">Do Something</a>

        </div>
      </section>
    </div>
    <script src="js/app.js"></script>
  </body>
</html> 

document.getElementById("item1").onclick = function displayA() {
  this.innerHTML = "A";
};

document.getElementById("item2").onclick = function displayB() {
  this.innerHTML = "B";
};

document.getElementById("item3").onclick = function displayC() {
  this.innerHTML = "C";
};

document.getElementById("item4").onclick = function displayD() {
  this.innerHTML = "D";
};

document.getElementById("item5").onclick = function displayE() {
  this.innerHTML = "E";
};

document.getElementById("item6").onclick = function displayF() {
  this.innerHTML = "F";
};

document.getElementById("item7").onclick = function displayG() {
  this.innerHTML = "G";
};

document.getElementById("item8").onclick = function displayH() {
  this.innerHTML = "H";
};

document.getElementById("item9").onclick = function displayI() {
  this.innerHTML = "I";
};


//Refresh Button

document.getElementById("refreshPage").onclick = function refreshPage() {
  location.reload();
};


//Do Something Button

document.getElementById("something-else").onclick = function doSomething() {
  this.innerHTML = "Something Else";
};