javascript - QuerySelector 没有显示我输入的内容 + 为什么 onClick 不能使用 index.html 和 app.js 文件？

Question

首先，当它们在另一个文档上时，为什么 onClick 不起作用？我的 onclick 函数在我的 js 文件中，onclick 在我的 html 文件中的按钮上。我试图在 html 文件中制作我的一些 JavaScript，但是当我使用 console.log(navn) 时，QuerySelector 代码没有显示正确的文本；一切似乎都很好但不起作用？

抱歉，如果它混淆我使用 Sublime 3 以防它很重要

const navn = document.querySelector('.navn > input');
const password = document.querySelector('.password > input');

function klik() {
  console.log(navn);
  console.log(password);
}

<center>
  <p class="navn1">LOG IND</p>
</center>

<div class="navn">
  <span id="navn">Navn: &nbsp;</span> <input type="text" class="inavn"><br><br>
</div>

<center>
  <div class="password">
    <span id="pass">Password: &nbsp;</span> <input type="text"><br>
  </div>

  <br><br>

  <button onClick="klik()" class="logind">Log ind</button>
  <br>

  <h1></h1>
<center>

Answer 1

问题是您创建了一个嵌套的函数，它不会被调用。您需要创建一个具有全局范围的函数并在 window.onload

中更改它

var klik; //declaring a global variable.
window.onload = function(){
  const navn = document.querySelector('.navn > input');
  const password = document.querySelector('.password > input');

   //changing it to the function
  klik = function() {
      console.log(navn);
      console.log(password);
  }
}

<center>
            <p class="navn1">LOG IND</p>
        </center>

        <div class="navn">
            <span id="navn">Navn: &nbsp;</span> <input type="text" 
             class="inavn"><br><br>
        </div>

        <center>
            <div class="password">
                <span id="pass">Password: &nbsp;</span> <input 
                type="text"><br>
            </div>

            <br><br>

            <button onClick="klik()" class="logind">Log ind</button>
            <br>

            <h1></h1>
        <center>