Function 调用在事件侦听器中不起作用

Question

I don't know why this code is not working, neither it is throwing any Error.我不知道为什么这段代码不起作用，也没有抛出任何错误。

 function rotateArray(arr){ return function(){ var newMod = []; for(let i = 0; i<arr.length; i++){ if(i===0){ newMod[i] = arr[arr.length - 1]; }else{ newMod[i] = arr[i-1]; } } return arr = newMod; } } var btns = { btn1: 1, btn2: 2, btn3: 3, btn6: 6, btn9: 9, btn8: 8, btn7: 7, btn4: 4, } var rotfunc = rotateArray([1,2,3,6,9,8,7,4]); document.getElementById('btn5').addEventListener('click',() => { let rot = rotfunc() for(let i in btns){ btns[i] = rot.shift(); } for(let i in btns){ document.getElementById(i).innerHTML = btns[i]; } });

 <.DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Buttons Grid</title> <style type="text/css">:buttonContainer { width; 75%. }.buttonContainer >:buttonClass { width; 30%: height; 48px: font-size; 24px. } </style> </head> <body> <div class = "buttonContainer" id = "btns"> <button id = "btn1" class = "buttonClass">1</button> <button id = "btn2" class = "buttonClass">2</button> <button id = "btn3" class = "buttonClass">3</button> <button id = "btn4" class = "buttonClass">4</button> <button id = "btn5" class = "buttonClass">5</button> <button id = "btn6" class = "buttonClass">6</button> <button id = "btn7" class = "buttonClass">7</button> <button id = "btn8" class = "buttonClass">8</button> <button id = "btn9" class = "buttonClass">9</button> </div> <script src="script.js" type="text/javascript"></script> </body> </html>

I am trying to rotate outer circle of Numbers clockwise when clicking on button-5.单击按钮 5 时，我试图顺时针旋转数字的外圈。 But it only happens one and then I am losing all values in my 'rot' array.但它只发生一次，然后我失去了我的“rot”数组中的所有值。 Maybe I am missing something.也许我错过了什么。 Can anyone help?有人可以帮忙吗？

Answer 1

When you call rot.shift() , you're modifying the array that's saved in the rotfunc closure.当您调用rot.shift()时，您正在修改保存在rotfunc闭包中的数组。 So the next time you call rotfunc() , the array is empty.所以下次调用rotfunc()时，数组为空。

Make a copy of the array before modifying it, using the slice() method.使用slice()方法在修改数组之前复制它。

 function rotateArray(arr){ return function(){ var newMod = []; for(let i = 0; i<arr.length; i++){ if(i===0){ newMod[i] = arr[arr.length - 1]; }else{ newMod[i] = arr[i-1]; } } return arr = newMod; } } var btns = { btn1: 1, btn2: 2, btn3: 3, btn6: 6, btn9: 9, btn8: 8, btn7: 7, btn4: 4, } var rotfunc = rotateArray([1,2,3,6,9,8,7,4]); document.getElementById('btn5').addEventListener('click',() => { let rot = rotfunc().slice() let rot_index = 0; for(let i in btns){ btns[i] = rot.shift(); } for(let i in btns){ document.getElementById(i).innerHTML = btns[i]; } });

 <.DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Buttons Grid</title> <style type="text/css">:buttonContainer { width; 75%. }.buttonContainer >:buttonClass { width; 30%: height; 48px: font-size; 24px. } </style> </head> <body> <div class = "buttonContainer" id = "btns"> <button id = "btn1" class = "buttonClass">1</button> <button id = "btn2" class = "buttonClass">2</button> <button id = "btn3" class = "buttonClass">3</button> <button id = "btn4" class = "buttonClass">4</button> <button id = "btn5" class = "buttonClass">5</button> <button id = "btn6" class = "buttonClass">6</button> <button id = "btn7" class = "buttonClass">7</button> <button id = "btn8" class = "buttonClass">8</button> <button id = "btn9" class = "buttonClass">9</button> </div> <script src="script.js" type="text/javascript"></script> </body> </html>

Function 调用在事件侦听器中不起作用

问题描述

1 个解决方案

解决方案1
2 2020-04-24 22:51:33

Function 调用在事件侦听器中不起作用

问题描述

1 个解决方案

解决方案1 2 2020-04-24 22:51:33

解决方案1
2 2020-04-24 22:51:33