Javascript 如何从JS调用函数到HTML_Javascript_Html

Javascript 如何从JS调用函数到HTML

javascript html

Javascript 如何从JS调用函数到HTML,javascript,html,Javascript,Html,我在这里可能有点离题，但我正在尝试自学JS，在调用函数并将其与HTML关联的正确方法方面遇到了问题。我甚至不确定我的密码功能是否正确。非常感谢任何帮助或小型课程 <body> <div class="header"> <h1>Password Generator</h1> </div> <div class="viewer"> <p id="view">test</p> </div>

我在这里可能有点离题，但我正在尝试自学JS，在调用函数并将其与HTML关联的正确方法方面遇到了问题。我甚至不确定我的密码功能是否正确。非常感谢任何帮助或小型课程

<body>
<div class="header">
<h1>Password Generator</h1>
</div>
<div class="viewer">
<p id="view">test</p>
</div>
<div class="content">
<button onclick="generate();">Generate</button>
</div>
<div class="footer">
<p></p>
</div>
 <script src="c:\tesweb\testjs.js"></script>
</body>


密码生成器
测试
生成

函数密码（）{
var retVal=“”；
var chars=“abcdefghijklmnopqrstuvxyz1234567890abcdefghijklmnopqrstuvxyz@$&！？”；
变量长度=8；
对于（变量i=0，n=chars.length；i

您不需要返回该值，因为它对该值没有任何作用。如果您正在计算某个值，并且需要运行一个函数来获取一个值，那么您将返回。为此，只需使用

retVal

设置

视图的innerHTML。请看我的片段以获得答案。：）

函数生成（）{
变量长度=8，
charset=“abcdefghijklmnopqrstuvxyzabefghijklmnopqrstuvxyzo123456789”，
retVal=“”；
对于（变量i=0，n=charset.length；i


密码生成器
测试
生成

一个重要提示：在浏览器中试用调试工具（例如Chrome中的控制台）。这会给你很多信息
例如，当运行代码并单击“生成”按钮时，控制台日志中将显示此错误：“未捕获引用错误：未定义x”
这是有道理的，因为在generate（）函数中使用了x，但没有定义x。您也有password（）函数，但您没有使用/调用它
可以这样想：函数通常会接收输入，对该输入执行某些操作，然后返回输出。但函数只有在您调用它时才会运行
在您的例子中，password（）函数不接收输入，但会生成一个随机字符串作为输出
要修复代码，只需调用password（）函数。如果需要，可以将结果放入该“x”变量中（或放入具有任何其他名称的变量中）
然后，您的generate（）函数将如下所示：
function generate() {
    var x = password();
    document.getElementById("view").innerHTML = x;
}

我们现在该怎么办？我们将x变量设置为password（）函数的输出，然后在id为“view”的元素上显示为HTML
请注意，x
变量也可以在此处命名为anything

现在，让我们再次运行代码并再次检查Chrome控制台日志。。。新错误：未捕获类型错误：Math.Floor不是函数
好的，我们正在取得进展。floor
函数实际上需要全部小写（floor vs.floor）。让我们也改变一下。然后再次运行代码
它正在工作
但是，即使它工作正常，您也没有以正确的方式在password（）函数中返回输出。您只需返回retVal而不是返回x=retVal
在函数中，您应该只返回一些内容，因此可以使用输出或将其分配给某个变量。“x=retVal”在这里也起作用的原因是它将简单地将x设置为等于retVal，然后返回x。。（而不是直接返回retVal）
我希望你明白我的意思。我知道很难开始编程，而且要花一点时间来实现函数应该如何工作
以下是完整的JS代码及其更正：
function password() {
  var retVal = "";
  var chars = "abcdefghijklmnopqrstuvwxyz1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ#@$&!?";
  var length = 8;

  for (var i = 0, n = chars.length; i < length; i++) {
    retVal += chars.charAt(Math.floor(Math.random() * n));
  }
  return retVal;
}

function generate() {
  var x = password();
  document.getElementById("view").innerHTML = x;
}

函数密码（）{
var retVal=“”；
var chars=“abcdefghijklmnopqrstuvxyz1234567890abcdefghijklmnopqrstuvxyz@$&！？”；
变量长度=8；
对于（变量i=0，n=chars.length；i很难比Mozilla的资源做得更好。玩得高兴明亮的感谢您的帮助@wesley synio您的解释很到位，再次感谢
function password() {
  var retVal = "";
  var chars = "abcdefghijklmnopqrstuvwxyz1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ#@$&!?";
  var length = 8;

  for (var i = 0, n = chars.length; i < length; i++) {
    retVal += chars.charAt(Math.floor(Math.random() * n));
  }
  return retVal;
}

function generate() {
  var x = password();
  document.getElementById("view").innerHTML = x;
}