m0_72027734 2022-11-27 10:54 采纳率: 83.3%
浏览 30
已结题

通过js按钮触发样式改变但是样式改变失效,并且后面部分的代码也一同失效的问题

问题遇到的现象和发生背景

在写一个js的时候发现onclick事件中一部分没有触发,进而导致后面的事件也无法触发,检查时发现变量是正确指向了我想要的元素(我需要的那个元素正确的与我的变量联系在一起了),改变样式的书写格式也没有问题(指对于需要改变的样式都是这样书写的x.style.width='5vw‘没有书写成x.width='5vw'的错误写法),只要对这个变量所代表的元素进行样式改变那么后面的代码就无法触发(具体详情可以通过注释下面的divtrymethod11变量的各行改变样式的代码来观察到)其他的元素改变样式的时候就不会有影响,正常改变,

用代码块功能插入代码,请勿粘贴截图

问题部分的css

.divtrymethod1-1 {
  
  display: inline-block;
  vertical-align: top;
  color: rgb(235, 15, 15);
  width: 38.2%;
  height: 888px;
  transition: .2s;
  overflow: auto;


}
//下面为点击之后需要更改的样式
.divtrymethod1-1 {
  height: 15vw;
  transition-delay: .8s;
  margin-left: 1%;
  margin-top: 6%;
  font-size: 0.8vw;
  color: black;
}

问题部分的js

<script>

        var reciperead = document.querySelector('#recipe1')
        var flagfortrying = 0
        var canclereading = document.querySelector('#divremove')

        var divtryintro = document.querySelector('.divtryintro')
        var divzoompiecename11 = document.querySelector('.divzoompiecename1-1')
        var divzoompieceintro11 = document.querySelector('.divzoompieceintro1-1')
        var divtrymethod11 = document.querySelector('.divtrymethod1-1')
        var imgdivzoom = document.querySelector('.imgdivzoom')
        var divzoom11 = document.querySelector('.divzoom1-1')


        //         .divzoom1-1:hover div.divtrymethod1-1 {
        //   height: 15vw;
        //   transition-delay: .8s;
        //   margin-left: 1%;
        //   margin-top: 6%;
        //   font-size: 0.8vw;
        //   color: black;

        // }

        reciperead.onclick = function () {

            if (flagfortrying == 0) {


                reciperead.style.display = 'none'
                canclereading.style.display = 'block'
                flagfortrying = 1

                divtryintro.style.width = '25%'
                divtryintro.style.marginLeft = '2%'

                imgdivzoom.style.width = '18%'
                imgdivzoom.style.marginLeft = '3%'
                imgdivzoom.style.marginTop = '10%'

                divzoompiecename11.style.fontSize = '1.3vw'


                divzoompieceintro11.style.fontSize = '0.8vw'


                divzoom11.style.width = '100%'
                divzoom11.style.paddingBottom = '41.4%'

//此为问题部分
                divtrymethod11.sytle.height = '15vw'
                // divtrymethod11.sytle.transitionDelay = '0.8s'
                // divtrymethod11.sytle.marginLeft = '1%'
                // divtrymethod11.sytle.marginTop = '6%'
                // divtrymethod11.sytle.fontSize = '0.8vw'
                // divtrymethod11.sytle.color = 'black'
                alert(divtrymethod11.innerHTML)
  //此为问题部分,将所有的样式改变部分注释掉alert函数能够正确输出,当有任意一个样式改变的命令存在则alert不执行
            }

        }
        canclereading.onclick = function () {


            if (flagfortrying == 1) {

                reciperead.style.display = 'inline-block'
                canclereading.style.display = 'none'
                flagfortrying = 0

            }


        }




    </script>

html部分

<div class="container">
        <div class="divtypeblock1">Chinese
            <div class="divtrymanue1" id="Chinese"></div>
            <div class="fullscreen">
                <div class="divzoom1-1">
                    <div>
                        <img src="../resource/picture/22.jpg.webp" alt="Noodles" class="imgdivzoom">
                    </div>

                    <div class="divtryintro">
                        <div class="divzoompiecename1-1">ALLSPICE PORK CHOPS <br> & EASY SAMBAL VERMICELLI</div>
                        <div class="divzoompieceintro1-1">Food feeds the body <br> music feeds the soul <br> and
                            delicious
                            pork
                            is paired <br>with moderately tasting noodles <br> as a sign of the end of <br> the day.
                        </div>
                    </div>
                    <div class="recipereadmore" id="recipe1">R <br> E <br> A <br> D </div>
                    <div class="divremove" id="divremove">
                        <img src="../resource/picture/叉叉.png" alt="cha" class="imgxx">
                    </div>
//此为出现问题部分对应的html
                    <div class="divtrymethod1-1"><strong class="strongtrytext">Directions</strong><br>
                        <hr><strong> Brine for Pork Chops </strong><br>

                        1.In a medium saucepan, add all dry ingredients and 2 cups of water. <br><br>
                        2.Bring mixture up to a low simmer, stirring to dissolve salt and sugar.<br><br>
                        3.Remove from heat and add remaining 2 cups of water.<br><br>
                        4.Set aside and let cool down to room temperature.<br><br>
                        <strong>Allspice Brined Pork Chops</strong> <br><br>

                        1.In a large non reactive bowl, add pork chops to room temperature brine.<br><br>
                        2.Make sure chops are completely covered – weigh down with a small plate if needed. Cover and
                        refrigerate for at least 6 hours – overnight is ideal.<br><br>
                        3.When ready to cook, remove chops from brine and blot very dry with paper towel.<br><br>
                        4.Let chops come slightly up to room temperature (at the very least, remove from fridge 5
                        minutes
                        before cooking to take the chill off, for more even cooking.) Preheat oven to 350 degrees F, and
                        have a small baking sheet (with a wire cooling rack if you have one) standing by.<br><br>
                        5.Heat a cast iron (or other oven ready) pan to medium high and add vegetable oil. Season pork
                        chops
                        with pepper and sear over high heat, pressing down very slightly, until lovely dark golden
                        brown,
                        about 5 minutes on one side.<br><br>
                        6.Flip the pork chop and place the entire pan with pork chops directly into the oven, for 10-12
                        minutes or until chops are cooked to desired doneness.<br><br>
                        7.Check with an instant read thermometer inserted sideways into the the thickest part of the
                        chop –
                        it
                        should read 150 F – remembering that the chop will continue to cook as it rests.<br>
                        8.Remove chops from oven and let rest at least 10 minutes, tended with foil to keep warm, before
                        slicing.<br><br>
                        9.To serve, slice in 1/2 inch thick pieces towards bone, leaving a nice piece remaining on the
                        bone
                        (that’s the cook’s treat!) Serve warm with Easy Sambal Vermicelli.<br><br>
                        <strong>Easy Sambal Vermicelli</strong> <br><br>

                        1.In a large bowl, place dried vermicelli and pour over enough boiling water just to cover.
                        (Push
                        noodles down slightly with tongs as needed.)<br><br>
                        2.Let stand 1-2 minutes, then drain well and rinse with plenty of cold water.
                        Drain again and spread now cooked noodles on a clean tray.<br><br>
                        3.Toss lightly with vegetable oil to prevent sticking.<br><br>
                        Meanwhile in a large bowl, combine remaining ingredients, stirring well to dissolve sugar.
                        Add back cooled, cooked noodles and toss to evenly coat noodles with the delicious dressing.
                        Serve with Allspice Pork Chops.<br><br>
                        <hr>
                        <strong> Recipes copyright Roger Mooking 2017</strong>
                    </div>
                </div>
            </div>
        </div>
    </div>

运行结果及报错内容

运行结果是当我点击触发按钮时没有触发 divtrymethod11的样式改变效果的以及下面作为验证的alert()函数,说明当代码运行到此处的时候后面部分都不执行了

我的解答思路和尝试过的方法

尝试检查过是否正确引用变量以及使用正确的样式改变方法,结果检查无误

我想要达到的结果

当点击触发按钮之后样式正确改变并且触发下面的alert函数验证成功

  • 写回答

1条回答 默认 最新

      报告相同问题?

      相关推荐 更多相似问题

      问题事件

      • 系统已结题 12月6日
      • 已采纳回答 11月28日
      • 修改了问题 11月27日
      • 创建了问题 11月27日

      悬赏问题

      • ¥20 用SQL语句写下面的表格
      • ¥100 IIC通讯数据算法分析
      • ¥15 matlab 绘制涡流场
      • ¥15 依存句法分析如何与BERT模型及GCN相结合
      • ¥66 有偿收一个会Python 与unitysocket通信,会简单mediapipe手势识别的哥
      • ¥15 药店卖药设计使利润最大
      • ¥15 模拟银行实现VIP服务
      • ¥20 ECU在实车上can通讯失败或不稳定
      • ¥15 关于VB.net调用Excel如何打包的问题?
      • ¥15 VB6.0+WebBrowser如何实现网页内嵌图片按钮点击