表单文本字段变量在 Javascript 中显示未定义

Question

这是我的第一篇文章，无论如何我会直截了当。

我有一个表单，当用户输入他们的姓名时，Javascript 会将值保存到全局变量“ch_name”。当我在站点上的任何位置通过警报访问此变量时，它始终显示我输入的正确值。但是，它仅适用于警报，当我尝试使用始终显示为未定义的变量来引用用户时。

我尝试重新排序代码，以防它没有正确加载并且这也没有产生任何结果。我开始怀疑我是否完全引用了它，因为我对 JavaScript 还是很陌生。

您可能会发现我的代码一团糟，但这就是我所拥有的。

var ch_name; //my global variable

var data = new Array(); //I've taken a snippet out of an array of 8.
data[0] = '<p>Question 1</p>' + ch_name + "\n" + //ch_name is referenced on this line.
'<button onclick="results1()">Click Me</button>' + "\n" + 
'<button onclick="results2()">Click Me</button>' + "\n" +
'<button onclick="results3()">Click Me</button>';

function charName(form) { //This is the code that changes the global variable ch_name.
ch_name = document.nameform.user.value;
ranData = Math.floor(Math.random() * data.length);
document.getElementById("placeholder").innerHTML = data[ranData];
}

html sn-p:

<form NAME="nameform" method="GET">
<p>Enter your character name:</p> <input type="text" name="user" value="" />
    <input type="button" value="Start" onClick="charName(this.form)"/>
</form>
<div id="placeholder"></div>

通过任何地方的警报引用 ch_name 都会给我正确的结果，页面加载时为空白，输入字符串后它会给出正确的名称。但是每当我通过数组变量引用它时，它都会显示一个未定义的。这不是完整的代码，但我确定变量名等没有冲突。我已经扫描了好几次，我确定这只是我是个白痴。

有解决办法吗？我已经准备好将整个代码完全放在 ch_name 后面，以专注于页面的其他区域。

感谢您的阅读和任何帮助。

Answer 1

我认为你的问题是当你的data 数组生成时，ch_name 没有值，所以它显示为空白。即使您更改了ch_name，data 值也不会使用正确的值重新生成。

对此的解决方案可能是使用regenerate_data 函数，该函数在您更改全局字符名称时重新生成数据data 数组。

Answer 2

数据不会改变你的思维方式。

我认为对你来说最好的选择是用函数替换 data Array。

现在ch_name 参数将在您每次运行该函数时动态创建。即每次按下按钮时，都会更新数据。

如何更改页面中的数据？

var ch_name; //my global variable
function charName(form) { //This is the code that changes the global variable ch_name.
    ch_name = document.nameform.user.value;
    ranData = Math.floor(Math.random() * data.length);
    document.getElementById("placeholder").innerHTML = getranData(ranData);
 }

function getranData(num){
   if(num==0)
          return '<p>Question 1</p>' + ch_name + "\n" + //ch_name is referenced on this line.
          '<button onclick="results1()">Click Me</button>' + "\n" + 
          '<button onclick="results2()">Click Me</button>' + "\n" +
          '<button onclick="results3()">Click Me</button>';
  else if (num==1) ; ///...and so on
}