Блог

Главная - Вопросы по программированию - Переключатель и обычная кнопка не взаимодействуют

Переключатель и обычная кнопка не взаимодействуют

#javascript #html #jquery

Вопрос:

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
        <title>BookStore</title>
        <style>
            img{
             width: 250px;
                 height: 300px;
         float: none;
            }
        button {
         fl
        </style>

    <script type="text/javascript">

    function fn1(){
        var rd1 = document.getElementById("rd1");
        var rd2 = document.getElementById("rd2");

        if(rd1.checked==true)
            alert("the channel selected is: "   rd1.value);
        else if(rd2.checked==true)
            alert("the channel selected is: "   rd2.value);
        else
            alert("nothing is selected.");
    }

    </script>

</head>
<body>
    <center><h1>Welcome to my Bookstore</h1></center>
    <br>
<div class="container">
    <div class="row">
        <div id="book1" class="col">
            <p></p>
            </div>
            <div id="book2" class="col">
            <p></p>
            </div>
            <div id="book3" class="col">
            <p></p>
            </div>
        </div>
    <div class="row">
        <div>
            <button style="width:75px; hieght: 75px;" onclick="myFunction()" id="btn1.1" class="hide">Hide</button>
            <button style="width:75px; hieght: 75px; visibility:hidden;" onclick="myFunction1()" id="btn1.2" class="show">Show</button>
<input id="rd1" name="grp1" type="radio" value="simple snippets"> simple </input>
            amp;emsp; amp;emsp; amp;emsp; amp;emsp; amp;emsp; amp;emsp; amp;emsp; amp;emsp; amp;ensp; 

            <button style="width:75px; hieght: 75px;" onclick="myFunction2()" id="btn2.1" class="hide1">Hide</button>
            <button style="width:75px; hieght: 75px; visibility:hidden;" onclick="myFunction3()" id="btn2.2" class="show1">Show</button>

            amp;emsp; amp;emsp; amp;emsp; amp;emsp; amp;emsp; amp;emsp; amp;emsp; amp;emsp; amp;ensp; 

            <button style="width:75px; hieght: 75px;" onclick="myFunction4()" id="btn3.1" class="hide2">Hide</button>
            <button style="width:75px; hieght: 75px; visibility:hidden;" onclick="myFunction5()" id="btn3.2" class="show2">Show</button>
        </div>
    </div>

<input id="rd2" name="grp1" type="radio" value="Telusko Learnings">Telusko Learnings</input>

        <div class="row">
            <div  id="book4" class="col">
                    <p></p>
            </div>
            <div id="book5" class="col">
                    <p></p>
            </div>
            <div id="book6" class="col">
                <p></p>
            </div>
        </div>

    <div class="row">
        <div>
            <button style="width:75px; hieght: 75px;" onclick="myFunction6()" id="btn4.1" class="hide3">Hide</button>
            <button style="width:75px; hieght: 75px; visibility:hidden;" onclick="myFunction7()" id="btn4.2" class="show3">Show</button>

            amp;emsp; amp;emsp; amp;emsp; amp;emsp; amp;emsp; amp;emsp; amp;emsp; amp;emsp; amp;ensp;

            <button style="width:75px; hieght: 75px;" onclick="myFunction8()" id="btn5.1" class="hide4">Hide</button>
            <button style="width:75px; hieght: 75px; visibility:hidden;" onclick="myFunction9()" id="btn5.2" class="show4">Show</button>

            amp;emsp; amp;emsp; amp;emsp; amp;emsp; amp;emsp; amp;emsp; amp;emsp; amp;emsp; amp;ensp;

            <button style="width:75px; hieght: 75px;" onclick="myFunction10()" id="btn6.1" class="hide5">Hide</button>
            <button style="width:75px; hieght: 75px; visibility:hidden;" onclick="myFunction11()" id="btn6.2" class="show5">Show</button>

        </div>
    </div>

        <div class="row">
            <div id="book7" class="col">
                    <p></p>
            </div>
            <div id="book8" class="col">
                    <p></p>
            </div>
            <div id="book9" class="col">
                    <p></p>
            </div>
        </div>

    <div class="row">
        <div>
            <button style="width:75px; hieght: 75px;" onclick="myFunction12()" id="btn7.1" class="hide6">Hide</button>
            <button style="width:75px; hieght: 75px; visibility:hidden;" onclick="myFunction13()" id="btn7.2" class="show6">Show</button>

            amp;emsp; amp;emsp; amp;emsp; amp;emsp; amp;emsp; amp;emsp; amp;emsp; amp;emsp; amp;ensp;

            <button style="width:75px; hieght: 75px;" onclick="myFunction14()" id="btn8.1" class="hide7">Hide</button>
            <button style="width:75px; hieght: 75px; visibility:hidden;" onclick="myFunction15()" id="btn8.2" class="show7">Show</button>
        
            amp;emsp; amp;emsp; amp;emsp; amp;emsp; amp;emsp; amp;emsp; amp;emsp; amp;emsp; amp;ensp;

            <button style="width:75px; hieght: 75px;" onclick="myFunction16()" id="btn9.1" class="hide8">Hide</button>
            <button style="width:75px; hieght: 75px; visibility:hidden;" onclick="myFunction17()" id="btn9.2" class="show8">Show</button>
        
        </div>
    </div>

        <div class="row">
            <div id="book10" class="col">
                    <p></p>
            </div>
    </div>

    <div class="row">
        <div>
            <button style="width:75px; hieght: 75px;" onclick="myFunction18()" id="btn10.1" class="hide9">Hide</button>
            <button style="width:75px; hieght: 75px; visibility:hidden;" onclick="myFunction19()" id="btn10.2" class="show9">Show</button>
        
        </div>
    </div>

<button onlick="fn1()"> click me </button>
            
</div>
    <script src="sell-books.js"></script>
</body>
</html>

это мой код, когда я его запускаю, появляется переключатель, и в конце появится обычная кнопка. но затем, когда я пытаюсь использовать переключатель и кнопку вместе, выбрав переключатель, а затем нажав обычную кнопку, ничего не появляется. Предполагается, что появится сообщение о том, какой из них был выбран. я поместил сценарий, который я использую, в голову, просто чтобы вы тоже могли это увидеть.

Комментарии:

1. Я не вижу никакого кода.

2. извините, что только что обновил его. это создавало у меня проблемы с публикацией и я пытался разобраться в этом

3. только что увидел, что у меня была опечатка в кнопке onclick, там написано onlick. lol

4. В стороне, <center> устарело, вместо этого используйте CSS ( developer.mozilla.org/en-US/docs/Web/HTML/Element/center )

Ответ №1:

В вашем коде была орфографическая ошибка. Вот очищенный пример.

 function fn1() {
  var rd1 = document.getElementById("rd1");
  var rd2 = document.getElementById("rd2");

  if (rd1.checked == true)
    alert("the channel selected is: "   rd1.value);
  else if (rd2.checked == true)
    alert("the channel selected is: "   rd2.value);
  else
    alert("nothing is selected.");
} 
 <head>
  <meta charset="UTF-8">
  <title>BookStore</title>
</head>

<body>
  <center>
    <h1>Welcome to my Bookstore</h1>
  </center>
  <label><input id="rd1" name="grp1" type="radio" value="simple snippets" />simple snippets</label>
  <label><input id="rd2" name="grp1" type="radio" value="Telusko Learnings" />Telusko Learnings</label>
  <button onclick="fn1()"> click me </button>
</body>
</html>
Метки: