一个简单的JavaScript疯狂lib游戏

我用JavaScript编写了一个简单的mad lib程序。除了一件事，所有的工作都正常。“我的姓名”值显示为未定义。代码如下。请帮我找出错误

这里是链接

HTML:

名称：
最喜欢的颜色：
福福瑞特广场：
编号：
发射

Js:

var name = document.querySelector("#name");
var color = document.querySelector("#color");
var place = document.querySelector("#place");
var number = document.querySelector("#number");
var story = document.querySelector("#story")
var launch = document.querySelector("#launch");
launch.addEventListener("click", writeStory, false);

function writeStory(){
var launchedStory = "";
launchedStory += "<p>Welcome, " + name.value + ". ";
launchedStory += "Only silly people choose " + color.value + " as their favorite color.</p>";
launchedStory += "<p>Is " + place.value + " your current place or your birth place.</p>";
launchedStory += "<p>By the way, " + number.value + " is your serial number.</p>";

story.innerHTML = launchedStory;
}

var name=document.querySelector（“#name”）；
var color=document.querySelector（“颜色”）；
var place=document.querySelector（“#place”）；
变量编号=document.querySelector（“#编号”）；
var story=document.querySelector（“故事”）
var launch=document.querySelector（“启动”）；
launch.addEventListener（“单击”，writeStore，false）；
函数writeStore（）{
var launchedStory=“”；
LaunchedStore+=“欢迎，“+name.value+”；
LaunchedStore+=“只有傻瓜才会选择“+color.value+”作为他们最喜欢的颜色。
”；
LaunchedStore+=“是“+place.value+”您的当前所在地或出生地。
”；
LaunchedStore+=“顺便说一下，“+number.value+”是您的序列号。
”；
story.innerHTML=LaunchedStore；
}

您需要将变量名称从

名称更改为其他名称，因为解释器将其解析为
窗口。名称改为
。
您需要将变量名称从
名称更改为其他名称，因为解释器将其解析为
窗口。名称改为
。
编写代码windows事件onload函数中的内部脚本标记。全局变量名与窗口对象的name属性冲突。您还可以将全局变量的名称从name更改为其他名称

溶胶1

var nameElement = document.querySelector("#name");

然后可以使用
namelement.value

但最好不要污染全局名称空间。因此，在函数范围中编写代码

溶胶2

<script type="text/javascript">
  window.onload = function () {
    // your code here
  }
</script>


window.onload=函数（）{
//你的代码在这里
}

下面是FIDLE
在windows事件onload函数的脚本标记中编写代码。全局变量名与窗口对象的name属性冲突。您还可以将全局变量的名称从name更改为其他名称

溶胶1

var nameElement = document.querySelector("#name");

然后可以使用
namelement.value

但最好不要污染全局名称空间。因此，在函数范围中编写代码

溶胶2

<script type="text/javascript">
  window.onload = function () {
    // your code here
  }
</script>


window.onload=函数（）{
//你的代码在这里
}

这是小提琴
如果您正在做
madlibs
，那么请执行以下操作：

puts "give me a transportation"
transportation = gets.chomp

那么

如果您正在执行
madlibs
，请执行以下操作：

puts "give me a transportation"
transportation = gets.chomp

那么

上面已经给出了答案，但答案更为复杂。简单地说，“name”是一个JavaScript关键字，不应该用作变量。我把“name”的id改为“nombre”，它工作得很好


HTML:

名称：
最喜欢的颜色：
最喜欢的地方：
编号：
发射

JS:

var name=document.querySelector（“#nombre”）；
var color=document.querySelector（“颜色”）；
var place=document.querySelector（“#place”）；
变量编号=document.querySelector（“#编号”）；
var story=document.querySelector（“故事”）
var launch=document.querySelector（“启动”）；
launch.addEventListener（“单击”，writeStore，false）；
函数writeStore（）{
var launchedStory=“”；
LaunchedStore+=“欢迎，+nombre.value+”；
LaunchedStore+=“只有傻瓜才会选择“+color.value+”作为他们最喜欢的颜色。
”；
LaunchedStore+=“是“+place.value+”您的当前所在地或出生地。
”；
LaunchedStore+=“顺便说一下，“+number.value+”是您的序列号。
”；
story.innerHTML=LaunchedStore；
}
上面已经给出了答案，但答案更为复杂。简单地说，“name”是一个JavaScript关键字，不应该用作变量。我把“name”的id改为“nombre”，它工作得很好


HTML:

名称：
最喜欢的颜色：
最喜欢的地方：
编号：
发射

JS:

var name=document.querySelector（“#nombre”）；
var color=document.querySelector（“颜色”）；
var place=document.querySelector（“#place”）；
变量编号=document.querySelector（“#编号”）；
var story=document.querySelector（“故事”）
var launch=document.querySelector（“启动”）；
launch.addEventListener（“单击”，writeStore，false）；
函数writeStore（）{
var launchedStory=“”；
LaunchedStore+=“欢迎，+nombre.value+”；
LaunchedStore+=“只有傻瓜才会选择“+color.value+”作为他们最喜欢的颜色。
”；
LaunchedStore+=“是“+place.value+”您的当前所在地或出生地。
”；
LaunchedStore+=“顺便说一下，“+number.value+”是您的序列号。
”；
story.innerHTML=LaunchedStore；
}
在Chrome上对我来说很好。不是在你的代码笔中，而是在这里：还要确保这是在html在Chrome中呈现良好工作状态后运行的。不是在你的代码中，而是在这里：还要确保这是在html呈现HI haim770后运行的，谢谢你的有效回复。但我想知道，解释器是否从
input
tag的
name
属性中获取
.name
<任何函数外部的代码>变量名称
将被
窗口阻止。名称
全局变量。在函数内部它将work@Minhaz，它不是关于元素的
name
属性，而是关于全局上下文。在浏览器中，全局上下文是碰巧具有
名称
属性的
窗口
对象。您好，haim770，感谢您的有效回复。但我想知道，解释器是否从
input
tag的
name
属性中获取
.name
<任何函数外部的代码>变量名称
将被
窗口阻止。名称
全局变量。在函数内部它将work@Minhaz，它不是关于元素的
name
属性，而是关于全局上下文。在浏览器中，g
var name = document.querySelector("#nombre");
var color = document.querySelector("#color");
var place = document.querySelector("#place");
var number = document.querySelector("#number");
var story = document.querySelector("#story")
var launch = document.querySelector("#launch");
launch.addEventListener("click", writeStory, false);

function writeStory(){
    var launchedStory = "";
    launchedStory += "<p>Welcome, " + nombre.value + ". ";
    launchedStory += "Only silly people choose " + color.value + " as their favorite color.</p>";
    launchedStory += "<p>Is " + place.value + " your current place or your birth place.</p>";
    launchedStory += "<p>By the way, " + number.value + " is your serial number.</p>";

    story.innerHTML = launchedStory;
}