如何提醒输入值

Question

所以我最近决定尝试使用 Intel XDK 学习应用程序开发，但到目前为止我只了解一点点 HTML。

我正在尝试创建一个基本的测试应用程序，允许用户在文本框中键入消息，然后单击提交按钮，该按钮会发出显示输入文本的警报。

这就是我所拥有的：

Message:
<br>
<input type="text" id="message" value="">
<br>
<button type="button" value="document.getElementByID(message)" onclick=alert(message)>Generate Text</button>

但是当我运行该应用程序时，它显示

[object HTMLInputElement]

。

我该如何解决这个问题？

Answer 1

要获取元素值，请使用

var message = document.getElementById("message").value;
alert( message );

另外，不要使用内联 JS（

on*

属性处理程序）。从您的 JS 文件中分配一个事件处理程序：

const elGenerate = document.querySelector("#generate");
const elMessage = document.querySelector("#message");

elGenerate.addEventListener("click", function() {
    console.log(elMessage.value);
});

<input type="text" id="message" value=""><br>
<button id="generate" type="button">Generate Text</button>

Answer 2

但是当我运行应用程序时，它显示“[object HTMLInputElement]”。怎么办 我解决这个问题吗？

message

位于

html

，

javascript

引用具有

id

"message"

的元素。您正在使用

alert()

元素

DOM

作为参数来调用

#message

。要纠正此问题，您可以将

.value

的

#message

属性：

message

传递给

alert(message.value)

。

注意，请参阅我们为什么不在 JavaScript 中使用元素 ID 作为标识符？。

您也可以将

click

事件附加到

button

元素，并在

alert(document.getElementById("message"))

处理程序中调用

click

，如 @RokoC.Buljan solution 所示。

您在

alert()

处缺少

onclick

和

.value

 处 

message

周围的引号

Message:
<br>
<input type="text" id="message" value="">
<br>
<button type="button" onclick="alert(message.value)">Generate Text</button>

Answer 3

document.getElementByID(message)

不属于按钮的值属性，但应该位于警报内：

Message:
<br>
<input type="text" id="message" value="">
<br>
<button type="button" onclick="alert(document.getElementById('message').value)">Generate Text</button>

注意

通常建议将 HTML 代码与 JavaSCript 代码分开，并使用

Document.getElementById()

而不是 HTML 属性

onclick

来添加点击事件。

所以，这意味着最好像这样重写上面的代码：

document.getElementById("button").addEventListener("click", function() {
   alert(document.getElementById('message').value);
});

Message:
<br>
<input type="text" id="message" value="">
<br>
<button type="button" id="button">Generate Text</button>

Answer 4

您必须在警报中使用此功能，并且值只是显示为按钮的参数 试试这个：

Message: 
<br> 
<input type="text" id="message" value=""> 
<br> 
<button type="button" value="show" onclick=alert(document.getElementByID('message'))>Generate Text</button>

Answer 5

您需要在按钮的值参数中输入：

document.getElementById(message).value

谢谢你们帮我解决问题。