Javascript Switch function return undefined

I have a simple quiz app, with certain clicks you get rating.

function 1() = javascript switch statement that render rating ( low, medium , high)

this function calculate the rating based on click count. it works good

then I have function color() that supposed get the rating result of function 1 and style it . however, function 2 always render undefined simply it is executed before function 1 is done.

I am sure I am writing the callback function incorrect.

<script type="text/javascript">  var clicks = 0;    var user = dish;    function onClick() {    clicks += 1;    document.getElementById("clicks").innerHTML = clicks;    switch (clicks) {      case 0:      case 1:      case 2:        document.getElementById("dish").innerHTML = 'LOW.';        document.getElementById("dish").style.color = '#90ee90';          // code block        break;      case 3:      case 4:      case 5:        document.getElementById("dish").innerHTML = 'MEDIUM.';        document.getElementById("dish").style.color = '#ffbf00';        // code block        break;      case 6:      case 7:      case 8:      case 9:      case 10:      case 11:      case 12:        document.getElementById("dish").innerHTML = 'HIGH.';        document.getElementById("dish").style.color = '#ff5500';        // code block        break;        default:        // code block        document.getElementById("dish").innerHTML = 'HELLO.';    }    };    function onClickdouble() {    clicks += 2;    document.getElementById("clicks").innerHTML = clicks;    switch (clicks) {      case 0:      case 1:      case 2:        document.getElementById("dish").innerHTML = 'LOW.';        document.getElementById("dish").style.color = '#90ee90';        // code block        break;      case 3:      case 4:      case 5:        document.getElementById("dish").innerHTML = 'MEDIUM.';        document.getElementById("dish").style.color = '#ffbf00';        // code block        break;      case 6:      case 7:      case 8:      case 9:      case 10:      case 11:      case 12:        document.getElementById("dish").innerHTML = 'HIGH.';        document.getElementById("dish").style.color = '#ff5500';        // code block        break;      default:        // code block        document.getElementById("dish").innerHTML = 'HELLO.';    }  };    function noClick() {    clicks += 0;    document.getElementById("clicks").innerHTML = clicks;    switch (clicks) {      case 0:      case 1:      case 2:        document.getElementById("dish").innerHTML = 'LOW.';        document.getElementById("dish").style.color = '#90ee90';        // code block        break;      case 3:      case 4:      case 5:        document.getElementById("dish").innerHTML = 'MEDIUM.';        document.getElementById("dishr").style.color = '#ffbf00';        // code block        break;      case 6:      case 7:      case 8:      case 9:      case 10:      case 11:      case 12:        document.getElementById("dish").innerHTML = 'HIGH.';        document.getElementById("dish").style.color = '#ff5500';        // code block        break;      default:        // code block        document.getElementById("holder").innerHTML = 'HELLO.';    }    }  console.log((user).value); <  /script>    <  script type = "module" >      //get location     var map = L.map('map').fitWorld();  const tile = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?{foo}', {    foo: 'bar',    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'  });    // Socket Io  const socket = io.connect();    // icon color this is where the call back is returning undefined       function color() {    var user = document.getElementById("dish").innerHTML;    if (user === 'LOW.') {      return '#0DEAD0';    } else if (user === 'MEDIUM.') {      return '#FFCC00';    } else {      return '#F30B0B';    }  }    console.log(color());      var svg = '<svg height="10" width="10"><circle cx="5" cy="5" r="4" fill="' + color() + '" /></svg>';  var icon = L.divIcon({    html: svg,    iconSize: [10, 10],    iconAnchor: [10, 10]  });        // map locate  map.locate({    setView: true,    watch: true,    enableHighAccuracy: true,    maxZoom: 16  });  map.on('locationfound', e => {    const coords = [e.latlng.lat, e.latlng.lng];    const newMarker = L.marker(coords, {      icon: icon    });    newMarker.bindPopup('You are Here!');    map.addLayer(newMarker);    socket.emit('userCoordinates', e.latlng);  });    //socket new User connected  socket.on('newUserCoordinates', (coords) => {    console.log(coords);    const userIcon = L.icon({      iconUrl: '/img/icon2.png',      iconSize: [38, 42],    })    const newUserMarker = L.marker([coords.lat, coords.lng], {      icon: userIcon    });    newUserMarker.bindPopup('New User!');    map.addLayer(newUserMarker);  });    map.addLayer(tile);  </script>   

I cannot get the innerhtml (result dish of the quiz rating) so I can style it accordingly. and show it on the map as it is executed before the switch function render a result.

any tip or hint will be highly appreciated.

https://stackoverflow.com/questions/66592963/javascript-switch-function-return-undefined March 12, 2021 at 09:32AM