我必须输入,我想按Enter并将注意力从第一输入更改为第二输入,而不仅仅是使用鼠标。
到目前为止,我在带有keypress事件的第一个输入(jogador1)中创建了一个事件监听器。在内部,我做了一个条件,如果第一个Input(jogador1)已经有一个数字,并且按键值为13,则应该做一些更改为第二个输入的操作。那是我不知道的那部分吗?
这是我的代码:
let jogador1 = document.querySelector('#jogador1');
let jogador2 =document.querySelector('#jogador2');
let output = document.querySelector('#output');
let button = document.querySelector('#button');
let letsCompareValues = (e) => {
e.preventDefault();
let value1 = jogador1.value;
let value2 = jogador2.value;
if (value1 === value2 && !isNaN(value1) && !isNaN(value2)) {
output.innerHTML = 'there is a match';
return
} else {
output.innerHTML ='there is no match';
}
}
button.addEventListener('click', letsCompareValues);
jogador1.addEventListener('click', function(){
jogador1.value = '';
jogador2.value = '';
output.innerHTML = '';
});
//HERE
jogador1.addEventListener('keypress', function(e){
var code = e.keyCode;
if(jogador1.value !== isNaN && code === 13){
jogador2.focus;
}
})
<div>
<label for="jogador1">Player 1</label>
<input type="text" id="jogador1">
</div>
<div>
<label for="jogador2">Player 2</label>
<input type="text" id="jogador2">
</div>
<button id="button">JOGAR</button>
答案 0 :(得分:1)
您已经关闭。 element.focus()
是一个函数,因此需要括号才能调用它。
其他问题:
!== isNaN
检查字符串是否为空。相反,您应该使用str !== ''
,或者最好使用str
。keyEvent.key
代替keyEvent.code
。
let jogador1 = document.querySelector('#jogador1');
let jogador2 = document.querySelector('#jogador2');
let output = document.querySelector('#output');
let button = document.querySelector('#button');
let letsCompareValues = (e) => {
e.preventDefault();
let value1 = jogador1.value;
let value2 = jogador2.value;
if (value1 === value2 && !isNaN(value1) && !isNaN(value2)) {
output.innerHTML = 'there is a match';
return
} else {
output.innerHTML = 'there is no match';
}
}
button.addEventListener('click', letsCompareValues);
jogador1.addEventListener('click', function() {
jogador1.value = '';
jogador2.value = '';
output.innerHTML = '';
});
jogador1.addEventListener('keypress', function(e) {
if (jogador1.value && e.key === 'Enter') {
jogador2.focus();
}
})
<div>
<label for="jogador1">Player 1</label>
<input type="text" id="jogador1">
</div>
<div>
<label for="jogador2">Player 2</label>
<input type="text" id="jogador2">
</div>
<div id="output"></diV>
<button id="button">JOGAR</button>