Search code examples
javascriptswitch-statementinnerhtml

Javascript switch dosen't work correctly

I am trying to make a one-pager that in its left there will be a fixed div and in this div will be an image.

The image will be changed by the id of the div that the mouse will be above.

I wrote this function:

var number ='number';
document.onmouseover = function(obj) {
    console.log(obj.target.id);

    switch (obj.target.id) {

        case 1:
            var number = "a";
            break;
        case 2:
            var number = "b";
            break;
        case 3:
            var number = "c";
            break;
        case 4:
            var number = "d";
            break;
        case 5:
            var number = "e";
            break;
        case 6:
            var number = "f";
            break;
    }

    document.getElementById("numberdiv").innerHTML = "this div id is " + number;
}

I have one main problem, the switch doesn't receive the data from the obj.target.id.

this is my HTML

<div class="div" id="1">1</div>
<div class="div" id="2">2</div>
<div class="div" id="3">3</div>
<div class="div" id="4">4</div>
<div class="div" id="5">5</div>
<div class="div" id="6">6</div>
<div id="numberdiv"></div>

JSFIDDLE

Solution

  • Either you need to parse parseInt(obj.target.id,10) or convert case 1 to case "1", Since obj.target.id is string it will not match to any case so either you need to convert switch value to number or case value to string.

    var number = 'number';
document.onmouseover = function(obj) {
  console.log(obj.target.id);

  switch (parseInt(obj.target.id, 10)) {

    case 1:
      var number = "a";
      break;
    case 2:
      var number = "b";
      break;
    case 3:
      var number = "c";
      break;
    case 4:
      var number = "d";
      break;
    case 5:
      var number = "e";
      break;
    case 6:
      var number = "f";
      break;
  }

  document.getElementById("numberdiv").innerHTML = "this div id is " + number;
}
    .div {
  height: 200px;
}
body:nth-child(odd) {
  background-color: blue;
}
body:nth-child(even) {
  background-color: green;
}
#numberdiv {
  position: fixed;
  top: 50%;
  float: right;
  background-color: aqua;
}
    <body>
  <div class="div" id="1">1</div>
  <div class="div" id="2">2</div>
  <div class="div" id="3">3</div>
  <div class="div" id="4">4</div>
  <div class="div" id="5">5</div>
  <div class="div" id="6">6</div>
  <div id="numberdiv"></div>
</body>

    OR

    var number = 'number';
document.onmouseover = function(obj) {
  console.log(obj.target.id);

  switch (obj.target.id) {

    case "1":
      var number = "a";
      break;
    case "2":
      var number = "b";
      break;
    case "3":
      var number = "c";
      break;
    case "4":
      var number = "d";
      break;
    case "5":
      var number = "e";
      break;
    case "6":
      var number = "f";
      break;
  }

  document.getElementById("numberdiv").innerHTML = "this div id is " + number;
}
    .div {
  height: 200px;
}
body:nth-child(odd) {
  background-color: blue;
}
body:nth-child(even) {
  background-color: green;
}
#numberdiv {
  position: fixed;
  top: 50%;
  float: right;
  background-color: aqua;
}
    <body>
  <div class="div" id="1">1</div>
  <div class="div" id="2">2</div>
  <div class="div" id="3">3</div>
  <div class="div" id="4">4</div>
  <div class="div" id="5">5</div>
  <div class="div" id="6">6</div>
  <div id="numberdiv"></div>
</body>