Uncaught SyntaxError:无效或意外的令牌javascript

问题描述 投票:0回答:1

是javascript的初学者...在以下代码中,提交button()的逻辑不起作用“ btn.addEventListener”。只有if部分正在执行,else部分出现一些问题还有一个查询,在其他部分中,通过div id给出的“ img”是正确的。

"if(isImgClicked.equals('img') && isDatePicked.equals('2020'))
                     {
                        window.location.replace("sample.html");
                     }"

<div id="img" class="swiper-slide"
                            style="background-image: url(./img/product.png)">
                            <b>product</b>
                        </div>

场景:如果我选择2020年n说要选择第一张图像,则应转到指定的重定向页面...当我选择2021年n同一张第一图像时,应转到另一页。

 <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Swiper slider</title>
    <meta name="viewport"
        content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <link rel="stylesh
        href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
      $(function() {
            $('#datepicker').datepicker({
                changeYear: true,
                showButtonPanel: true,
                dateFormat: 'yy',
                onClose: function(dateText, inst) { 
                    var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
                    $(this).datepicker('setDate', new Date(year, 1));
                }
            });

           $("#datepicker").focus(function () {
                $(".ui-datepicker-month").hide();
                $(".ui-datepicker-calendar").hide();
            });

        });
      </script>
    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="swiper.min.css">
    <link rel="stylesheet" href="style.css">
    </head>


    <body>

        <h3>welcome user!!</h3>
        <h2>Select by Year & Model</h2>
        <div id="picker">
            <p align="center">
                <b>Year:</b> <input type="text" id="datepicker">
            </p>
        </div>

        <form align="right" name="form1" method="post" action="log_out.php">

            <label class="logoutLblPos"> <input class="submit"
                type="button" value="Log out" />
            </label>

            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <form>
                        <div id="img" class="swiper-slide"
                            style="background-image: url(./img/product.png)">
                            <b>product</b>
                        </div>
                    </form>
                    <div id="img1" class="swiper-slide"
                        style="background-image: url(./img/Product.png)">
                        <b>product</b>
                    </div>
                    <div id="img2" class="swiper-slide"
                        style="background-image: url(./img/product2.png)">
                        <b>product2</b>
                    </div>
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
            </div>

            <!-- Swiper JS -->
            <script src="swiper.min.js"></script>

            <!-- Initialize Swiper -->

            <script type=text/javascript>
            var swiper = new Swiper('.swiper-container', {
                effect : 'coverflow',
                grabCursor : true,
                centeredSlides : true,
                slidesPerView : 'auto',
                coverflowEffect : {
                    rotate : 50,
                    stretch : 0,
                    depth : 100,
                    modifier : 1,
                    slideShadows : true,
                },
                pagination : {
                    el : '.swiper-pagination',
                },
            });     
        </script>

            <p align=center>
                <input type="submit" value="submit" id="button">
            </p>
            <script type="text/javascript">
    let _img = document.getElementById("img");
    let _img1 = document.getElementById("img1");
    let _img2 = document.getElementById("img2");
    let _picker = document.getElementById("picker");
    let _btn = document.getElementById("button");

    let isImgClicked = false;
    let isDatePicked = false;
    _img.addEventListener("click", function(){
      isImgClicked = true;
    });
    _img1.addEventListener("click", function(){
      isImgClicked = true;
    });
    _img2.addEventListener("click", function(){
      isImgClicked = true;
    });
    _picker.addEventListener("click", function(){
      isDatePicked = true;
    });
    _btn.addEventListener("click", function(){



if(!isImgClicked || !isDatePicked)
          {
              alert("select the Year and Click the car image");

          }
          else 
             {
              if((isImgClicked =="img") && (isDatePicked == "2020"))
                 {
                    window.location.replace("sample.html");
                 }
              else if((isImgClicked =="img") && (isDatePicked == "2019))
                 {
               window.location.replace("sample1.html");
                 }
              else
                    if((isImgClicked =="img1") && (isDatePicked == "2019))
              {
              window.location.replace("sample2.html");
              }
          else if((isImgClicked =="img1") && (isDatePicked == "2020))
              {
               window.location.replace("sample3.html");
              }
          else
              {
              alert("!!!!")
              }
             }

            });
    </script>

        </form>
    </body>
    </html>
javascript html css
1个回答
0
投票

else条件工作正常,如果在alert()块中放置else作为第一条语句,则会观察到此情况。

问题是您的isImgClicked,而isDatePicked只会是truefalse。它们永远不会分配给您代码其余部分的任何其他内容,并且不能包含任何其他值。

因此isImgClicked.equals('img') && isDatePicked.equals('2020')之类的条件不可能永远成立。即使它们确实具有字符串,字符串,布尔值或任何本机JavaScript类型都没有equals()函数,因此,每次单击按钮时,此代码肯定会产生错误。确保在测试代码时都检查浏览器的JavaScript控制台。

要解决,您需要将isImgClickedisDatePicked分配给有意义的值,或者需要从_picker和其他元素中获取正确的数据。

© www.soinside.com 2019 - 2024. All rights reserved.