为什么当提示并确认时，我的箱子的颜色不会改变？ [英] why doesnt the colour of my boxes change when prompted and confirmed?

问题描述

< pre class =snippet-code-js lang-js prettyprint-override> function myFunction（）{if（confirm（Press a button！）== true）{if（this.style。 backgroundColor ==white）this.style.backgroundColor =yellow; else if（this.style.backgroundColor ==yellow）this.style.backgroundColor =red; else if（this.style.backgroundColor ==red）this.style.backgroundColor =else this.style.backgroundColor =;} else {txt =您按下取消！;} if（confirm（'你确定要将这个东西保存到数据库吗？'）== true）{//保存它！ }其他{//什么都不做！ var blocks = document.getElementsByClassName（foo）; for（i = 0; i< blocks.length; i ++）{blocks [i] .addEventListener（click，myFunction）;} .foo {float：left;}

宽度：30px; height：30px; margin：5px; border：1px solid rgba（0，0，0，.2）; border-radius：25％;}。white {background：#FFFFFF;}。whole {float：left;宽度：900px;身高：900px; margin：5px; border：1px solid rgba（0，0，0，.2）;}  

 < div class =whole> < div id =centerbox1class =foo white> A1< / div> < div id =centerbox2class =foo white> A2< / div> < div id =centerbox3class =foo white> A3< / div>< br>< br> < div id =centerbox4class =foo white> B1< / div> < div id =centerbox5class =foo white> B2< / div> < div id =centerbox6class =foo white> B3< / div>< / div>  

出于某种原因，我的提示和条件不会将我的箱子变为黄色，然后变为红色，然后变为原来的颜色。有谁知道为什么？我希望它改变颜色用户按是的提示。

例如：我点击广场，它提示我是或否，颜色变成黄色。点击黄色的方块，会提示我另一个是或否。把它变回原来的颜色。
这个问题是对 div onclick提示是或否，如果是，div改为不同的颜色

解决方案

$ b

1. 我注意到JavaScript无法从 .white 类中读取 element.style ，但可以当我为每个元素插入内嵌CSS时这样做。这在以下 jsfiddle 中有介绍。




2. 您在函数中使用了 this 作用域，而实际上并未提供 c>这实际上就是。所以，我在点击事件处理程序中传递了这个参数，并且自 this 不能用作函数参数，将其更改为 e 。

$ b

   function myFunction（ e）{if（confirm（Press a button！）== true）{if（e.style.backgroundColor ==white）e.style.backgroundColor =yellow;否则如果（e.style.backgroundColor ==yellow）e.style.backgroundColor =red; else if（e.style.backgroundColor ==red）e.style.backgroundColor =whiteelse e.style.backgroundColor =white; } else {txt =你按下取消！; } if（confirm（'你确定要将这个东西保存到数据库中吗？'）== true）{//保存它！ }其他{//什么都不做！ }} var blocks = document.getElementsByClassName（foo）; for（i = 0; i< blocks.length; i ++）{blocks [i] .addEventListener（click，function（）{myFunction（this）; }};}

   .foo {float：left;宽度：30px; height：30px; margin：5px; border：1px solid rgba（0，0，0，.2）; border-radius：25％;}。whole {float：left;宽度：900px;身高：900px; margin：5px; border：1px solid rgba（0，0，0，.2）;}

    < div class =whole> < div id =centerbox1class =foostyle =background：white;> A1< / div> < div id =centerbox2class =foostyle =background：white;> A2< / div> < div id =centerbox3class =foostyle =background：white;> A3< / div>< br>< br> < div id =centerbox4class =foostyle =background：white;> B1< / div> < div id =centerbox5class =foostyle =background：white;> B2< / div> < div id =centerbox6class =foostyle =background：white;> B3< / div>< / div>  

   
   

   function myFunction() {
   if (confirm("Press a button!") == true) {
     if(this.style.backgroundColor == "white")
       this.style.backgroundColor = "yellow";
     else if(this.style.backgroundColor == "yellow")
       this.style.backgroundColor = "red";
     else if(this.style.backgroundColor == "red")
       this.style.backgroundColor = "" 
     else
       this.style.backgroundColor = "";
   } else {
     txt = "You pressed Cancel!";
   }
   
     if (confirm('Are you sure you want to save this thing into the database?') == true) {
       // Save it!
     } else {
       // Do nothing!
     }
   }
   
   var blocks = document.getElementsByClassName("foo");
   for (i = 0; i < blocks.length; i++) {
     blocks[i].addEventListener("click", myFunction);
   }

   .foo {
     float: left;
     width: 30px;
     height: 30px;
     margin: 5px;
     border: 1px solid rgba(0, 0, 0, .2);
     border-radius: 25%;
   }
   
   .white{
     background: #FFFFFF;
   }
   
   .whole {
     float: left;
     width: 900px;
     height: 900px;
     margin: 5px;
     border: 1px solid rgba(0, 0, 0, .2);
   }

   <div class="whole">
     <div id="centerbox1" class="foo white">A1</div>
     <div id="centerbox2" class="foo white">A2</div>
     <div id="centerbox3" class="foo white">A3</div><br><br>
   
     <div id="centerbox4" class="foo white">B1</div>
     <div id="centerbox5" class="foo white">B2</div>
     <div id="centerbox6" class="foo white">B3</div>
   </div>

   for some reason my prompts and conditions doesnt change my boxes to yellow then to red then to the original color. anyone knows why? i expected it to change colors the users press yes to the prompt.

   Example: i clicked square, it prompts me yes or no, the color turns yellow. clicking on the square, which is yellow, will prompt me another yes or no. turning it back to the original color. this question is a follow up of div onclick prompts yes or no, if yes, div change to different color

   解决方案

   This worked for me.

   Explanation:

   1. I noticed that JavaScript cannot read element.style from the .white class, but could do so when I inserted in-line CSS to each element. This is demostrated in the following jsfiddle.

   2. You were using the this scope in your function, without actually providing what this actually is. So, I passed a this argument in the click event handler, and since this cannot be used as a function parameter, changed it to e.

   function myFunction(e) {
     if (confirm("Press a button!") == true) {
   
       if (e.style.backgroundColor == "white")
         e.style.backgroundColor = "yellow";
       else if (e.style.backgroundColor == "yellow")
         e.style.backgroundColor = "red";
       else if (e.style.backgroundColor == "red")
         e.style.backgroundColor = "white"
       else
         e.style.backgroundColor = "white";
     } else {
       txt = "You pressed Cancel!";
     }
   
     if (confirm('Are you sure you want to save this thing into the database?') == true) {
       // Save it!
     } else {
       // Do nothing!
     }
   }
   
   var blocks = document.getElementsByClassName("foo");
   for (i = 0; i < blocks.length; i++) {
     blocks[i].addEventListener("click", function() {
       myFunction(this);
     });
   }

   .foo {
     float: left;
     width: 30px;
     height: 30px;
     margin: 5px;
     border: 1px solid rgba(0, 0, 0, .2);
     border-radius: 25%;
   }
   
   .whole {
     float: left;
     width: 900px;
     height: 900px;
     margin: 5px;
     border: 1px solid rgba(0, 0, 0, .2);
   }

   <div class="whole">
     <div id="centerbox1" class="foo" style="background:white;">A1</div>
     <div id="centerbox2" class="foo" style="background:white;">A2</div>
     <div id="centerbox3" class="foo" style="background:white;">A3</div><br><br>
   
     <div id="centerbox4" class="foo" style="background:white;">B1</div>
     <div id="centerbox5" class="foo" style="background:white;">B2</div>
     <div id="centerbox6" class="foo" style="background:white;">B3</div>
   </div>

   这篇关于为什么当提示并确认时，我的箱子的颜色不会改变？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！