IFE JavaScript Mission 1 （百度前端技术学院）

最新推荐文章于 2021-06-21 13:00:02 发布

刘一笔(公众号同名)

最新推荐文章于 2021-06-21 13:00:02 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/samt327/article/details/79586348

版权

这篇博客记录了作者在完成IFE JavaScript Mission 1时遇到的问题和解决过程，包括使用getElementById和点击事件，理解.value的重要性，以及探讨onclick在HTML与JavaScript代码中的分离方式，提到了addEventListener()方法的使用，并指出innerHTML与.value的适用场景区别。

摘要由CSDN通过智能技术生成

纯个人记录，大神勿喷。

任务1的题目为

用户可以在输入框中输入任何内容，点击“确认填写”按钮后，用户输入的内容会显示在“您输入的值是”文字的右边。

初看题目很简单，不就是用getElementById配合点击事件。

遂敲下代码(部分核心)

let text=documet.getElementById("aqi-input");
document.getElementById("aqi-display").innerhtm=text;

但是打开没用，就很纳闷。网上查找比对，原来是少了.value。

补上立马就好了，电脑是个很好的机器朋友，你好好对他，他就不会给我冷脸看。

另外值得一提的就是，要不要让onclick在html代码里出现，不出现的话，html代码就和JavaScript代码分离更纯粹。

就需要这样写了：

let click=dicument.getElementById("button");
button.οnclick=function(){
    some codes;
}

此外，大神朋友告诉我的另一种写法是使用addEventListener()方法

document.getElementById("button").addEventListener("click",function(){
    let text=documet.getElementById("aqi-input");
    document.getElementById("aqi-display").innerhtm=text; 
})

再有学习到的就是，innerHTML必须对于成对的标签才能使用，比如input就使用不了;而在成对标签中就使用不了.value.

后面还加了一句比对innerHtml和innertext不同的代码，不过仅一句也没比出什么不同。在这里就不深究了。