JavaScript switch语句只执行default case

Question

我是 JavaScript 的新手并编写了这个简短的脚本来为我的页面主体选择随机背景颜色，但它只继续执行默认情况。我不知道出了什么问题。

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script>
        function chC(){

            var cl=document.getElementById('demo');
            var colNo=Math.random()*4;
            switch (colNo){
                case 1:{
                    cl.style.background='red';
                }
                case 2:{
                    cl.style.background='yellow';
                }
                case 3:{
                    cl.style.background='pink';
                }
                default :{
                    cl.style.background='orange';
                }
            }

        }
    </script>
    <title></title>
</head>
<body id="demo">
<button type="button" onclick="chC();">change</button>


</body>
</html>

Answer 1

Math.random() * 4 不是 return 1、2 或 3，而是 return 之类的东西

3.4111702758818865
3.9287009509280324
1.1707445457577705
1.5766741186380386
2.6374688586220145

你需要四舍五入，因为你不包括零，我猜你想向上，但这也包括 4，谁知道呢

var colNo = Math.ceil( Math.random()*4 ); // 1-4
// or
var colNo = Math.floor( Math.random()*4 ); // 0-3

还有....你的switch/case有问题，你需要在满足条件时中断

switch (colNo) {
    case 1:
        cl.style.background = 'red';
        break;
    case 2:
        cl.style.background = 'yellow';
        break;
    case 3:
        cl.style.background = 'pink';
        break;
    default:
        cl.style.background = 'orange';
}

FIDDLE

JavaScript switch语句只执行default case

JavaScript switch statement only executes the default case

javascript

switch-statement