Javascript document.getElementById答案

【问题标题】：Javascript document.getElementByIdJavascript document.getElementById
【发布时间】：2014-08-24 23:42:28
【问题描述】：

我不确定为什么这不起作用，有人可以告诉我为什么吗？

var red = [0, 100, 63];
var orange = [40, 100, 60];
var green = [75, 100, 40];
var blue = [196, 77, 55];
var purple = [280, 50, 60];

var myName = document.getElementById('mytext');
letterColors = [ red, orange, green, blue, purple ]
if(10 >  3) {
bubbleShape = "circle";
}

else {
    bubbleShape = "square";
}
drawName(myName, letterColors);
bounceBubbles()

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="alphabet.js"></script>
  </head>
  <body>
    <canvas id="myCanvas"></canvas>
    <script type="text/javascript" src="bubbles.js"></script>
    <script type="text/javascript" src="main.js"></script>
<head>
  Name: <input type="text" name="mytext"><br>
</form>
</head>
<body>
</body>
</html>

我试图让变量“myname”成为用户在文本框中键入的内容。

【问题讨论】：

mytext 不是 ID，而是名称属性
该元素在您尝试获取时不可用！

标签： javascript html textbox getelementbyid var

【解决方案1】：

您正在获取对元素的引用，但是您需要使用 value 属性来获取元素的值：

var myName = document.getElementById('mytext').value;

您需要设置元素的 id 才能使用getElementById 方法访问它：

<input type="text" name="mytext" id="mytext">

另外，不清楚 Javascript 代码在代码中执行的位置，但如果代码是 alphabet.js、bubble.js 或 main.js 文件的全部内容，那么您是在运行内容之前的代码身体的部分已被解析。要在加载内容后运行代码，请使用load 事件：

window.onload = function(){

  // code that uses the content goes in here

};

【讨论】：

为什么投反对票？如果你不解释你认为错的地方是什么，它就无法改进答案。
当我这样做时没有提交按钮，我是不是做错了什么。如何添加提交按钮？ PS，我不是投反对票的人
@user3579132：您的代码中没有提交按钮，如果需要，您必须为其添加代码，例如：<input type="submit" value="Send">。实际上，有些事情是错误的；你没有<form>标签来启动表单，并且在body标签中间有一个<head>和一个</head>标签。

【解决方案2】：

为您的输入标签设置 ID 属性

<input type="text" id="mytext" name="mytext">

【讨论】：

【解决方案3】：

改变

<input type="text" name="mytext">

到

 <input type="text" name="mytext" id="mytext">

然后使用

var myName = document.getElementById('mytext').value;

就像@Guffaa 建议的那样。

【讨论】：

当我这样做时没有提交按钮，我是不是做错了什么。如何添加提交按钮？