Состояние переменных между вызовами функций в JavaScript - PullRequest
Новая
       18

Состояние переменных между вызовами функций в JavaScript

0 голосов
/ 19 декабря 2018

Я пытаюсь сделать простое веб-приложение, это пульт дистанционного управления, который при нажатии клавиши показывает это число в соответствующем элементе div. Перед тем, как написать представленный код, я попробовал следующее: 

for(var i=1;i<btnNumber.length;i++){
  btnNumber[i].addEventListener("click", function(){
    dvNumber[i].textContent=this.textContent;
  })
}

это не сработало, и после того, как я провел некоторое исследование и прочитал много постов здесь, я смутно понимаю, почему;что-то связанное с асинхронной природой сохранения javascript и переменных состояний (было бы здорово, если бы кто-то мог дать четкое объяснение)

Теперь приведенный ниже код почти работает со следующей ошибкой консоли:

«Uncaught TypeError: Невозможно прочитать свойство 'addEventListener' из неопределенного» Также кнопка с нет.1 не работает.

Что именно происходит, может кто-нибудь дать объяснение для начинающих.

С уважением.

var btnNumber=document.querySelectorAll("button")
var dvNumber=document.querySelectorAll("div")
for(let i=1;i<=btnNumber.length;i++){
    btnNumber[i].addEventListener("click", function(){
    writeDiv(i,this)   
    })
}

function writeDiv(i,obj){
    dvNumber[i].textContent=obj.textContent;
}
div{
    width:200px;
    height: 200px;
    float: left;
    border: 4px solid gray;
    text-align: center;
    
}
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="testingpagelayout.css">
    <title>Document</title>
    </head>
<body>
    <button >1</button>
    <button >2</button>
    <button >3</button>
    <br>
    <button >4</button>
    <button >5</button>
    <button >6</button>
    <br>
    <button >7</button>
    <button >8</button>
    <button >9</button>
    <br>

        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>

    <script src="testingpagelayout.js"></script>
</body>
</html>

1 Ответ

0 голосов
/ 19 декабря 2018

Теперь это работает, изменив 

for(let i=1;i<=btnNumber.length;i++)

на 

for(let i=0;i<btnNumber.length;i++)

, поскольку массивы JavaScript начинаются с индекса 0 и заканчиваются длиной индекса-1. 

var btnNumber=document.querySelectorAll("button")
var dvNumber=document.querySelectorAll("div")
for(let i=0;i<btnNumber.length;i++){
    btnNumber[i].addEventListener("click", function(){
    writeDiv(i,this)   
    })
}

function writeDiv(i,obj){
    dvNumber[i].textContent=obj.textContent;
}
div{
    width:200px;
    height: 200px;
    float: left;
    border: 4px solid gray;
    text-align: center;
    
}
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="testingpagelayout.css">
    <title>Document</title>
    </head>
<body>
    <button >1</button>
    <button >2</button>
    <button >3</button>
    <br>
    <button >4</button>
    <button >5</button>
    <button >6</button>
    <br>
    <button >7</button>
    <button >8</button>
    <button >9</button>
    <br>

        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>

    <script src="testingpagelayout.js"></script>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...