javascript

时间:2018-12-19 10:44:22

标签: javascript javascript-events

我正在尝试制作一个简单的Web应用程序,它是一个遥控器数字键盘,当我按下一个键时,它会在相应的div元素中显示该数字,在编写提交的代码之前,我尝试了以下操作:

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

它没有用,在我进行了一些研究并阅读了许多本文之后,我隐约明白了为什么;与javascript的异步特性和变量状态保留有关(如果有人可以给出清晰的解释,那将是很好的选择)

现在,以下代码几乎可以解决以下控制台错误:

“未捕获的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 :(得分:0)

现在这里通过更改即可使用

$ErrorActionPreference="Stop"
$ProgressPreference="SilentlyContinue"

# $LocalDotnet is the path to the locally-installed SDK to ensure the
#   correct version of the tools are executed.
$LocalDotnet=""
# $InstallDir and $CliVersion variables can come from options to the
#   script.
$InstallDir = "./cli-tools"
$CliVersion = "1.0.1"

# Test the path provided by $InstallDir to confirm it exists. If it
#   does, it's removed. This is not strictly required, but it's a
#   good way to reset the environment.
if (Test-Path $InstallDir)
{
    rm -Recurse $InstallDir
}
New-Item -Type "directory" -Path $InstallDir

Write-Host "Downloading the CLI installer..."

# Use the Invoke-WebRequest PowerShell cmdlet to obtain the
#   installation script and save it into the installation directory.
Invoke-WebRequest `
    -Uri "https://dot.net/v1/dotnet-install.ps1" `
    -OutFile "$InstallDir/dotnet-install.ps1"

Write-Host "Installing the CLI requested version ($CliVersion) ..."

# Install the SDK of the version specified in $CliVersion into the
#   specified location ($InstallDir).
& $InstallDir/dotnet-install.ps1 -Version $CliVersion `
    -InstallDir $InstallDir

Write-Host "Downloading and installation of the SDK is complete."

# $LocalDotnet holds the path to dotnet.exe for future use by the
#   script.
$LocalDotnet = "$InstallDir/dotnet"

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

因为JavaScript数组的起始索引为0,结束于索引长度为1。

for(let i=0;i<btnNumber.length;i++)
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;
    
}