如何为单选按钮编写 switch 语句

Question

我正在从事电影选择器项目。我有五个单选按钮，在用户单击单选按钮后，我想显示具有该值的电影。我认为 switch 语句最适合这个项目。不过，我似乎无法让它工作。

这是单选按钮之一：

<input type="radio" id="avenger-movies" name="select-movie" value="avenger-movies">
                <label for="avenger-movies">Avenger films</label>

如何为这些按钮编写语句？到目前为止，这是我的功能：

const getRadioButtons = document.getElementsByName("select-movie");
getRadioButtons.forEach((radiobtn) => {
    
    radiobtn.addEventListener('change', (event) => {

        function handleOnChangeEvent() {
            // console.log(event.target.value)
            const inputValue = event.target.value;
            switch (inputValue) {
                // Case..
            }

        }
        handleOnChangeEvent()

    })
    
})

Answer 1

<div id="allRadio">
    <input type="radio" id="avenger-movies" name="select-movie" value="avenger-movies">
    <label for="avenger-movies">Avenger films</label>
    <input type="radio" id="hello" name="select-movie" value="avenger-movies">
    <label for="hello">hello world</label>
</div>
<script>
    document.getElementById("allRadio").addEventListener("click",(e)=>{
        switch(e.target.getAttribute("id")){
            case 'avenger-movies':
                alert(1);
                break;
            case 'hello':
                alert(2);
                break;
        }
    })
</script>

你可以使用事件委托来处理，希望对你有帮助。

如何为单选按钮编写 switch 语句

How to write a switch statement for radio buttons

javascript

function

switch-statement