Javascript 开关 function 返回 undefined

Question

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">
/


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>';

</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.

Answer 1

//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 

var color =  function(){
var user = document.getElementById("holder").innerHTML;
 if (user == 'LOW.') {
      return '#0DEAD0' 
 }else if (user == 'MEDIUM.' ) {
      return '#FFCC00' 
  }else {
      return '#F30B0B'
  }
}

function setMap(){
    if(document.getElementById("holder").offsetParent != null){
        console.log("working now");
        document.getElementById("holder").style.color = color();
        var svg = '<svg height="10" width="10"><circle cx="5" cy="5" r="4" fill="' + color() + '" /></svg>';
        console.log(svg);
        var icon = L.divIcon({ html: svg, iconSize: [10, 10], iconAnchor: [10, 10] });
        
        //location
        map.locate({setView: true, watch: true, enableHighAccuracy: true, maxZoom: 8});
        map.on('locationfound', e => {
        const coords = [e.latlng.lat, e.latlng.lng];
        const newMarker = L.marker(coords, {icon:icon});
        newMarker.bindPopup("Wear your Mask!");
        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: icon 
        });
        newUserMarker.bindPopup('Wear your Mask!');
        map.addLayer(newUserMarker);
        }); 
        
        
        socket.on('userCoordinates', (coords) => {
        console.log(coords);
        socket.broadcast.emit('newUserCoordinates', coords);
        });
        map.addLayer(tile);
    }
    else{
        setTimeout(setMap, 100);
    }
}

setMap();
  
 
 </script>