繁体   English   中英

为什么我的JavaScript代码没有通过document.write()产生任何输出?

[英]Why is my javascript code not producing any output with document.write()?

加载此简单的Java脚本代码时出现问题

<script type="text/javascript">
var customer={
     name:"Suresh"
     speak:function(){
       return "my name is" +this.name;
     }
     address:{
       street:"188 sector-5 MVP colony",
       city:"Visakhapatnam",
       state: "AP"
     }
};
document.write(customer.speak()+"<br/>");
document.write(customer.name+"lives at"+ customer.address.street+",<br/>");
</script>

欢迎使用堆栈溢出。 社区通常很乐意为这样的问题提供帮助,但实际上,让您更好地学习如何解决这些问题会更好。 毕竟,几乎每次遇到错误时,您几乎都无法发布到SO。

在这种情况下,找出此问题的最佳方法是什么? 这类似于找出为什么烤面包机不工作的原因。 首先,检查以确保已插入电源。然后,尝试使用其他插座。 或者,尝试将其他设备插入相同的插座以查看其是否有效。 等等。 这是称为“故障隔离”的基本思想。

您可能认为您对document.write有问题(顺便提一下,正如其他人所提到的,应避免使用-使用console.log )。 要对此进行测试,请编写一个单独的小程序,该程序仅执行一个document.write("Hi, Sasi"); 它行得通吗? 然后,您知道document.write在工作,并且您在正确使用它。

现在回到越野车程序。 第一件事就是简单地使用所有可用的工具来帮助您发现任何明显的错误。 您应该使用编辑器或IDE,该编辑器可以使语法高亮显示并可能指示语法错误-例如带有红色弯曲的下划线。 如果您不使用编辑器或IDE,请放弃正在执行的所有其他操作,找到一个不错的工具,然后花时间学习和设置它。

另一个有用的工具称为“ linter ”,它可以检查您的JS代码是否存在常见错误和潜在问题。 了解什么是短绒毛,以及如何使用它,然后选择其中一种,例如“ eslint”。 要使用linter,您可能必须将JS放入单独的JS文件中,并使用<script src="path/to/my/test.js">类的标签将其引入HTML。 无论如何,您都应该这样做。 现在做。

接下来,我们在Chrome浏览器中提供了非常有用的开发者控制台 如果您不知道这是什么或从未使用过,请再次放弃您正在做的所有其他事情,并详细研究其文档。 它具有许多方便的功能,但是在这种情况下,重要的是它将向您显示代码中的语法(和运行时错误)。 例如,当我剪切代码并将其粘贴到控制台中时,它立即给我错误

Uncaught SyntaxError: Unexpected identifier

我马上就知道,甚至在我需要担心逻辑或document.write出现问题之前,我的程序中都存在语法错误。 此外,它将指出发生错误的确切行:以speak:开头的行。 为什么speak “意外标识符”? 如果您现在不能自行解决问题,则可以采用“分而治之”的方法。 例如,尝试删除整个speak方法。 但是我仍然在address成员上收到错误。 也许在上面有东西在后面的事情引起了问题。 尝试删除name:"Suresh"上面一行,然后再试一次-你会看到在错误speak消失。 因此,您现在知道问题出在这两行之间或之间。 最终,您应该能够推断出省略了对象文字中key: value对之间的逗号,希望通过阅读诸如this这样的文档可以了解这一点

您只需标记一个键列表: 用逗号分隔的值对。

希望以上内容是在至少遇到真正需要发布到SO的更复杂问题之前,至少跟踪代码中大多数简单错误的良好起点。

首先,对象缺少逗号,应使用逗号分隔对象的属性。 而且正如@AndrewLi所建议的,不要使用document.write() 以下是工作代码的演示。 请参阅使用document.write()的缺点

 var customer={ name:"Suresh", speak:function(){ return "my name is " + this.name; }, address:{ street:"188 sector-5 MVP colony", city:"Visakhapatnam", state: "AP" } }; console.log(customer.speak()); console.log(customer.name+"lives at"+ customer.address.street); 

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM