Javascript HTML元素btn为空，什么'；怎么了？_Javascript_Html_Dom

Javascript HTML元素btn为空，什么'；怎么了？

javascript html dom

Javascript HTML元素btn为空，什么'；怎么了？,javascript,html,dom,Javascript,Html,Dom,这是我的JavaScript代码，它的工作是将数字转换为数字（函数工作）：函数转换器（num）{ 常量数=[10009005004001009050 40 10 9 5 4 1]；常量数字=['M'、'CM'、'D'、'CD'、'C'、'XC'、'L'、'XL'、'X'、'IX'、'V'、'IV'、'I']；常数arr=[]；设renum=num； while（arr.reduce（（之前、之后）=>before+after，0）renum-element>=0）； arr.push（数

这是我的JavaScript代码，它的工作是将数字转换为数字（函数工作）：

函数转换器（num）{
常量数=[10009005004001009050 40 10 9 5 4 1]；
常量数字=['M'、'CM'、'D'、'CD'、'C'、'XC'、'L'、'XL'、'X'、'IX'、'V'、'IV'、'I']；
常数arr=[]；
设renum=num；
while（arr.reduce（（之前、之后）=>before+after，0）renum-element>=0）；
arr.push（数字[EL]）；
renum-=个数[EL]；
}
返回arr.map（element=>numeric[numbers.indexOf（element）]）.join（“”）；
}
设btn=document.querySelector（'.btn'）；
btn.addEventListener（'click'，（）=>alert（convertToRoman（document.querySelector（'input'）.value）），false）；

这是我的html页面：

<html>
  <head>
  <title> Sumbit </title>
  </head>
  <body>       
  <script src="NBC.js"></script>
    <button class="btn"> Convert </button>
    <input type="number" class="inpu">
  </body>
</html>


萨姆比特
转换

如您所见，我想创建一个按钮和一个输入字段，当用户输入数字并单击按钮时，

.value

将该值作为函数的参数，因此当它单击它时（单击事件），它将显示为一个

警报，给出其罗马数字
问题是它在控制台中给了我'btn is null'错误，当代码被执行时，有什么问题
我尝试了document.getElementById（id）
，我尝试了删除类中的“.”，我尝试了我能做的一切
任何解决方案？
为了防止在完全加载之前访问，请在事件下添加事件侦听器：
…并在该事件侦听器中执行代码：


萨姆比特
转换
document.addEventListener（'DOMContentLoaded'，（）=>{
函数转换器（num）{
常量数=[10009005004001009050 40 10 9 5 4 1]；
常量数字=['M'、'CM'、'D'、'CD'、'C'、'XC'、'L'、'XL'、'X'、'IX'、'V'、'IV'、'I']；
常数arr=[]；
设renum=num；
while（arr.reduce（（之前、之后）=>before+after，0）renum-element>=0）；
arr.push（数字[EL]）；
renum-=个数[EL]；
}
返回arr.map（element=>numeric[numbers.indexOf（element）]）.join（“”）；
}
设btn=document.querySelector（'.btn'）；
btn.addEventListener（'click'，（）=>alert（convertToRoman（document.querySelector（'input'）.value）），false）；
});
这可能是延迟的工作，它只会告诉浏览器在执行脚本之前等待HTML解析器完成
属性说明：

“延迟”在HTML解析期间下载该文件，并仅执行该文件
在解析器完成后。延迟脚本也保证
按照它们在文档中出现的顺序执行
有几种方法可以做到这一点，第一种方法是在文档
对象上侦听DOMContentLoaded
事件侦听器
document.addEventListener("DOMContentLoaded", () => {
    let btn = document.querySelector('.btn');  
    btn.addEventListener('click', () => alert(convertToRoman(document.querySelector('input').value)), false);
});

第二种方法是在script元素上使用async
或defer
属性。如果使用async
属性，脚本的加载不会阻止DOM
加载，如果使用defer
属性，脚本元素必须在加载DOM
之前加载它的src
值
<html>
    <head>
        <title> Sumbit </title>
    </head>
    <body>       
        <script src="NBC.js" async></script>
        <button class="btn"> Convert </button>
        <input type="number" class="inpu">
    </body>
</html>


萨姆比特
转换

这只是一个旁注，要么将script元素作为主体
元素的最后一个子元素，要么在加载脚本时将其放入head元素
，按钮还不存在。将脚本移到底部，就在
之前，或使用DOMContentLoaded事件或其他延迟方式。@NiettheDarkAbsol谢谢！我真的要放弃了。我为这个愚蠢的问题感到抱歉，因为这是我第一次实际测试DOM操作！您只需将脚本标记移动到HTML正文的最后一个子项，不需要额外的代码。@rafaelcastrocouto没关系，我尝试延迟，它工作得很好。将脚本放在正文的末尾对我来说似乎是个坏主意，它使代码变得非常密集，而不是单独放在头部。这是你的呼叫男孩专业版，延迟在这几天有很大的支持。虽然这个链接可能会回答这个问题，但最好在这里包含答案的基本部分，并提供链接供参考。如果链接页面发生更改，仅链接的答案可能无效。-将有问题的解释和链接作为来源而不是资源包含在内。
document.addEventListener("DOMContentLoaded", () => {
    let btn = document.querySelector('.btn');  
    btn.addEventListener('click', () => alert(convertToRoman(document.querySelector('input').value)), false);
});

<html>
    <head>
        <title> Sumbit </title>
    </head>
    <body>       
        <script src="NBC.js" async></script>
        <button class="btn"> Convert </button>
        <input type="number" class="inpu">
    </body>
</html>