单击按钮时，我需要帮助将外部 javascript 文件中的数据添加到文本框

Question

我在外部 js 文件中内置了一些函数，我正在尝试创建一个按钮来运行该函数，然后将结果插入文本框。几个小时以来，我一直在用头撞墙，我觉得我有点接近了。

HTML代码：

<label for="fName">First Name </label>
            <input type="text" name="fName" id="fName" /><p>
            <input type="button" value="JS Test" name="button1" onclick="writeHumanName(this.form)" />

JS代码：

function writeHumanName() {
  // Array of my family 
  var humanName = ["Troy", "Beth", "Gabby", "Owen", "Evan"];


document.write("My Family = ");

// Loop through the humanName array
  for (var i = 0; i < humanName.length; i++) {
  document.write(humanName[i]);

}

}

Answer 1

您是否在索引页中包含了 js 文件？

<head>
  <meta charset="utf-8">
  <title>Hello world</title>

  <!-- scripts -->
  <script src="js/file1.js"></script> <!-- include files -->
  <script src="js/file2.js"></script>       
</head>

编辑：您似乎是从 html 调用您的函数，如下所示：

writeHumanName(this.form);

this 将是 window 对象；您需要从 DOM 中获取 div 并在 JS 中处理它...

function writeHumanName() {

    // Array of my family 
    var humanName = ["Troy", "Beth", "Gabby", "Owen", "Evan"],
        val = document.getElementById('fName').value;

    console.log("My Family = " + val);

    // Loop through the humanName array
    for (var i = 0; i < humanName.length; i++) {
        console.log(humanName[i]);
    }
}

Answer 2

更新：

HTML:

<label for="fName">First Name </label>
<input type="text" name="fName" id="fName" />

<p>

<input type="button" value="JS Test" name="button1" onclick="writeHumanName()" />

JS:

function writeHumanName() {
  // Array of my family 
  var humanName = ["Troy", "Beth", "Gabby", "Owen", "Evan"];

  var myString = ("My Family = ");

  // Loop through the humanName array
  for (var i = 0; i < humanName.length; i++) {
    myString += (humanName[i]) + ", ";
  }

  document.getElementById('fName').value = myString;

}

一个工作代码笔： http://codepen.io/anon/pen/waLLXO

Answer 3

https://jsfiddle.net/ebkd7sp4/8/

HTML:

<label for="fName">First Name </label>
<input type="text" name="fName" id="fName" />
<input type="button" value="JS Test" name="button1" onclick="writeHumanName()" />

JS:

function writeHumanName() {
  // Array of my family 
  var humanName = ["Troy", "Beth", "Gabby", "Owen", "Evan"];

  var text = "My Family = " + humanName.join(", ");

  document.getElementById("fName").value = text  
}

无需向您的函数传递任何内容。您可以使用 join() 命令来避免循环。使用 document.getElementById("fName").value 操作文本框中的文本。

单击按钮时，我需要帮助将外部 javascript 文件中的数据添加到文本框

I need help adding data from an external javascript file to a textbox when clicking a button

javascript

html

htmlbutton