Question

我有一个简单的测验应用程序，您可以通过某些点击获得评分。

function 1() = javascript switch 语句，呈现评级（低、中、高）

此函数根据点击次数计算评分。效果很好

然后我有函数 color() 应该得到函数 1 的评级结果并设置它的样式。然而，函数 2 总是呈现 undefined 只是在函数 1 完成之前执行。

我确定我写的回调函数不正确。

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

我无法获得innerhtml（测验评级的结果菜），因此我可以相应地设置样式。并在切换函数呈现结果之前执行时将其显示在地图上。

任何提示或提示将不胜感激。

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>

Javascript Switch函数返回未定义

1 个答案: