如何在JavaScript中通过点击按钮获取表单输入值？

我试着离开jQuery，但遇到了一件似乎很简单的事情：我只想在单击按钮时用输入值更新段落文本。我没有收到控制台错误，但不确定我在哪里搞砸了，因为输入值没有通过

编辑：我的问题是，我希望在单击按钮时将名称和作业输入值附加到内容，目前没有发生这种情况，但我也没有收到控制台错误

小提琴：

var nameValue=document.querySelector（“.input name”）.value；
var jobValue=document.querySelector（“.input job”）.value；
var resultsBlock=document.querySelector（“.results”）；
var resultName=document.querySelector（“.name result”）；
var resultJob=document.querySelector（“.job result”）；
函数showSignature（）{
resultName.innerHTML+=nameValue；
resultJob.innerHTML+=jobValue；
resultsBlock.classList.remove（“隐藏”）；
}
document.querySelector（“.show signature”）.addEventListener（'click'，function（）{
showSignature（）；
});
/*电子邮件签名生成器的主要样式*/
html，正文{
身高：100%；
宽度：100%；
最小高度：100%；
}
/*最初隐藏签名结果*/
.隐藏{
不透明度：0；
可见性：隐藏；
}
.可见{
不透明度：1；
能见度：可见；
}
.main用户界面{
背景：#fefefe；
高度：100vh；
宽度：100vw；
}
.集装箱{
对齐项目：居中；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
}
.文本输入{
-webkit外观：无；
背面可见性：隐藏；
边框：1px实心#ccc；
边界半径：4px；
盒影：无；
明确：两者皆有；
浮动：左；
边缘底部：40px；
填充：10px；
过渡：边界0.3s，变换0.3s；
高度：30px；
宽度：400px；
}
.文本输入：焦点，
.文本输入：悬停{
边框：1px纯紫色；
大纲：无；
转换：比例（1.1）；
}
.签名{
背景：紫色；
边界：无；
边界半径：50px；
盒影：无；
颜色：#fff；
明确：两者皆有；
浮动：左；
填充：20px；
过渡：背景0.3s，变换0.3s；
-webkit外观：无；
}
.显示签名：悬停，
.显示签名：焦点{
背景：#222；
转换：比例（1.1）；
}

WebDevStudios电子邮件签名生成器
给我签名
您的名字是
您的工作是
您正在检索页面加载上的值。您应该在单击按钮时检索它


函数showSignature（）{
var nameValue=document.querySelector（“.input name”）.value；
var jobValue=document.querySelector（“.input job”）.value；
var resultsBlock=document.querySelector（“.results”）；
var resultName=document.querySelector（“.name result”）；
var resultJob=document.querySelector（“.job result”）；
resultName.innerHTML+=nameValue；
resultJob.innerHTML+=jobValue；
resultsBlock.classList.remove（“隐藏”）；
}
document.querySelector（“.show signature”）.addEventListener（'click'，function（）{
showSignature（）；
});
/*电子邮件签名生成器的主要样式*/
html，正文{
身高：100%；
宽度：100%；
最小高度：100%；
}
/*最初隐藏签名结果*/
.隐藏{
不透明度：0；
可见性：隐藏；
}
.可见{
不透明度：1；
能见度：可见；
}
.main用户界面{
背景：#fefefe；
高度：100vh；
宽度：100vw；
}
.集装箱{
对齐项目：居中；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
}
.文本输入{
-webkit外观：无；
背面可见性：隐藏；
边框：1px实心#ccc；
边界半径：4px；
盒影：无；
明确：两者皆有；
浮动：左；
边缘底部：40px；
填充：10px；
过渡：边界0.3s，变换0.3s；
高度：30px；
宽度：400px；
}
.文本输入：焦点，
.文本输入：悬停{
边框：1px纯紫色；
大纲：无；
转换：比例（1.1）；
}
.签名{
背景：紫色；
边界：无；
边界半径：50px；
盒影：无；
颜色：#fff；
明确：两者皆有；
浮动：左；
填充：20px；
过渡：背景0.3s，变换0.3s；
-webkit外观：无；
}
.显示签名：悬停，
.显示签名：焦点{
背景：#222；
转换：比例（1.1）；
}

WebDevStudios电子邮件签名生成器
给我签名
您的名字是
您的工作是
代码的问题在于，您在第1行和第2行获取初始化值，并将其分配给这些变量

执行
input时，值是最终值，如果在浏览器上更改输入内容，则先前指定的值不会更改

如果您想要某个动态值，则必须将其查询推迟到您想要的时候

根据您的代码，解决方案如下：


var nameInput=document.querySelector（“.input name”）；
var jobInput=document.querySelector（“.input job”）；
var resultsBlock=document.querySelector（“.results”）；
var resultName=document.querySelector（“.name result”）；
var resultJob=document.querySelector（“.job result”）；
函数showSignature（）{
resultName.innerHTML+=nameInput.value；
resultJob.innerHTML+=jobInput.value；
resultsBlock.classList.remove（“隐藏”）；
}
@zero298我只是做了一个编辑，让它更清楚：基本上，我的问题是，我想在点击按钮时将名称和作业输入值附加到内容，目前没有发生这种情况，但我也没有收到控制台错误。很抱歉，我将其理解为“我收到控制台错误”，而您没有列出它们。我的错。哦，这很有道理——我真是太笨了！谢谢你快速指出：）如果它解决了问题，你能把答案标记为正确吗？