Eirik Eirik - 1 month ago 10
CSS Question

can't get html digram to appear

I am trying to make a diagram for HTML using JavaScript. The HTML page should contain a div container, where the diagram belongs.

I want to do this using a function that i've main; digram(uDivHTML, uList, uWidth). The first parameter takes a div inner html, as shown in the code below by the variable gram.

The seccond parameter should take an array. The array is supposed to have a string, then a number, and so on..

The third paramter should take a number that is used to multiply the length of each pilar.

Why is this not working? I have been trying different debuggers, and look over it many times, but can't seem to find out why. Any help is appreciated ;)



<head>
<title>Test</title>
<meta charset = "UTF-8">
</head>

<body>
<div id = "gram"></div>
<button id = "btn">123</button>
<script>
var gram = document.getElementById("gram").innerHTML;

var myList = [
"norge",20,
"svergie",17,
"danmark",23,
"england",11,
"usa",64
];

function diagram(uDivHTML, uList, uWidth) {
for(var index = 0, colIndex = 0; index < (uList.length - 1); index+=2, colIndex++) {
var col;

switch(colIndex) {
case 0: col = "red";
case 1: col = "blue";
case 2: col = "yellow";
case 3: col = "green";
case 4: col = "orange"; colIndex = 0;
}

var wid = uWidth * uList[index + 1];

uDivHTML +=
"<div style ='height:20px;display:block;color:white;background-color:"+col+";width:"+wid+"px;'>"+
uList[index]+"</div>";
}
}

var btn = document.getElementById("btn");

btn.onclick = diagram(gram, myList, 10);

</script>
</body>



Answer

There are a couple of issues with you code,

  • gram variable is a string. But when you want the concatenated string to be displayed on the page, you need to explicitly update the value to the DOM element using innerHTML for example.
    • You are missing break statement in your switch case.
    • You need to give a event handler that has a signature like btn.onclick = function(event){}. But you have a signature like this btn.onclick = diagram("", listArray, 10) . When you have something like this, your method wouldn't get the parameters you intend to pass.

I have modified your code a bit to make it work.

window.onload = function() {
  var gram = document.getElementById("gram");

  var myList = [
    "norge", 20,
    "svergie", 17,
    "danmark", 23,
    "england", 11,
    "usa", 64
  ];

  function diagram(uDivHTML, uList, uWidth) {

    for (var index = 0, colIndex = 0; index < (uList.length - 1); index += 2, colIndex++) {
      var col;

      switch (colIndex) {
        case 0:
          col = "red";
          break;
        case 1:
          col = "blue";
          break;
        case 2:
          col = "yellow";
          break;
        case 3:
          col = "green";
          break;
        case 4:
          col = "orange";
          colIndex = 0;
          break;
      }

      var wid = uWidth * uList[index + 1];

      uDivHTML.innerHTML +=
        "<div style ='height:20px;display:block;color:white;background-color:" + col + ";width:" + wid + "px;'>" +
        uList[index] + "</div>";
    }
  }

  var btn = document.getElementById("btn");
  btn.onclick = function() {
    diagram(gram, myList, 10);
  }
}
<div id="gram"></div>
<button id="btn">123</button>

Comments