javascript - 根据单选按钮选择更改 div 的内容

Question

长期以来，我一直在尝试让一个按钮出现在网页上，并使该按钮的链接根据所选的单选按钮而改变。但是，到目前为止，除了单选按钮外，我的网页上什么也没有出现。 到目前为止，这是我的代码:

<div id="quick-book">
    <script>
        if (document.getElementById("radio-restaurant").checked){
            document.getElementById("button").innerHTML = "<a href='./restaurant.html'>Submit</a>";
        } else if (document.getElementById("radio-hotel").checked){
            document.getElementById("button").innerHTML = "<a href='./hotel.html'>Submit</a>"
        }
    </script>
    <form name="frmRadio" id="radio-buttons" action="">
        <input type="radio" id="radio-restaurant" name="option" onclick="document.getElementById('radio-buttons').action='';">Restaurant<br>
        <input type="radio" id="radio-hotel" name="option" onclick="document.getElementById('radio-buttons').action='';">Hotel<br>
    </form>
    <div name ="button">
    </div>
</div>

我希望这里有人能帮助我指引正确的方向!

Answer 1

你应该在你的代码中添加一个函数，并在点击 radio 时添加它。

像这样:

<script>
    function myFunction() {
        if (document.getElementById("radio-restaurant").checked){
            document.getElementById("button").innerHTML = "<a href='./restaurant.html'>Submit</a>";
        } else if (document.getElementById("radio-hotel").checked){
            document.getElementById("button").innerHTML = "<a href='./hotel.html'>Submit</a>"
        }
    }
    </script>
    
<div id="quick-book">
    <form onchange="myFunction()" name="frmRadio" id="radio-buttons" action="">
        <input type="radio" id="radio-restaurant" name="option" onclick="document.getElementById('radio-buttons').action='';">Restaurant<br>
        <input type="radio" id="radio-hotel" name="option" onclick="document.getElementById('radio-buttons').action='';">Hotel<br>
    </form>
    <div id="button">
    </div>
</div>

并将 name="button"更改为 id="button"