[英]Is there anyway to shorten this javascript code?
I am a Javascript beginner, I am trying to make the rock paper scissor game as a beginner practice project.我是 Javascript 初学者,我正在尝试将石头剪刀布游戏作为初学者练习项目。 I wrote a piece of code to assign the move of the player.
我写了一段代码来分配玩家的移动。 I have three buttons on the page for the respektive moves
我在页面上有三个按钮用于各自的动作
Here is the code that i wrote to assign the value to the variable of Player move-这是我编写的用于将值分配给 Player move 变量的代码-
const paper =document.getElementById('paper');
const scissor = document.getElementById('scissor')
const rock = document.getElementById('rock')
paper.addEventListener('click', function (){movePlayer = "paper"; })
rock.addEventListener('click', function (){movePlayer = "rock"; })
scissor.addEventListener('click', function (){movePlayer = "scissor";})
The ID rock, paper, scissor are for the respective buttons. ID 石头、纸、剪刀用于相应的按钮。
I feel that there is a shorter way to do this.我觉得有一种更短的方法可以做到这一点。 This my first time on Stack Overflow
这是我第一次使用 Stack Overflow
SO normally does not do code review. SO通常不进行代码审查。 But here you are
但是你来了
['paper','scissor','rock'].forEach(hand => document.getElementById(hand)
.addEventListener('click', function() { movePlayer = this.id }));
but why not delegate?但为什么不委托?
let movePlayer; const showMove = () => console.log(movePlayer); document.getElementById("handContainer").addEventListener('click', function(e) { const tgt = e.target; if (tgt.classList.contains("hand")) { movePlayer = tgt.id; showMove(); } });
<div id="handContainer"> <div class="hand" id="paper">Paper</div> <div class="hand" id="scissors">Scissors</div> <div class="hand" id="rock">Rock</div> <div class="hand" id="lizard">Lizard</div> <div class="hand" id="spock">Spock</div> </div>
You can use an array and a loop:您可以使用数组和循环:
for (const type of ["rock", "paper", "scissor"]) {
document.getElementById(type).addEventListener("click", () => {
movePlayer = type;
});
}
Or forEach
, which is also a loop, just a less obvious one.或者
forEach
,这也是一个循环,只是一个不太明显的循环。
Side note: It's usually "scissors" rather than "scissor."旁注:通常是“剪刀”而不是“剪刀”。
You can listen to your div
elements click event.您可以收听您的
div
元素点击事件。 then in your click function get the element id
and set movePlayer
like this:然后在你的点击函数中获取元素
id
并像这样设置movePlayer
:
document.querySelectorAll('div').forEach((div) => { div.addEventListener('click', function() { movePlayer = this.id }) })
Edit: You can assign a class to your elements and use document.querySelectorAll('.classname')
either编辑:您可以为元素分配一个类并使用
document.querySelectorAll('.classname')
Using event delegation springs to mind想到使用事件委托
document.addEventListener("click", evt => {
const origin = evt.target.closest("#rock, #paper, #scissor");
if (origin) { movePlayer = origin.id; }
});
Demo :演示:
document.addEventListener("click", evt => { const origin = evt.target.closest("#rock, #paper, #scissor"); if (origin) { movePlayer = origin.id; // for demo const picked = document.querySelector(".picked"); const movePlayerId = document.querySelector(".movePlayer"); picked && picked.classList.remove("picked"); movePlayerId && movePlayerId.classList.remove("movePlayer"); origin.firstChild.classList.add("picked"); origin.classList.add("movePlayer"); } });
div { cursor: pointer; margin: 5px; } .picked { border-color: red; } div.movePlayer:after { content: ' > movePlayer now: 'attr(id); color: green; } span { padding: 3px; border: 1px solid transparent; }
<div id="paper"><span>Paper</span></div> <div id="scissor"><span>Scissor</span></div> <div id="rock"><span>Rock</span></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.