弹出警报用户在文本框中写了什么

Question

我有一个大学练习，但我被困住了。我想制作一个页面，按下“搜索”按钮将显示一个弹出窗口（警报），其中包含包含“学生 ID”的文本框的内容，同时按下“插入”按钮将显示一个弹出窗口（ alert) 文本框的内容包含“名字”。

这是我的代码：

<html>
<body>
<form action="/action_page.php">
<label for="studentid">Student Id:</laber><br>
<input type="text" id="studentid" name="studentid"><br>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname"><br><br>
<button type="button">Search</button>
<button type="button">Insert</button> 
</form>
</body>
</html>

Answer 1

编辑您的 HTML 以将其包含在按钮中：

<button type="button" onclick="search()">Search</button>
<button type="button" onclick="insert()">Insert</button>

并将此添加到末尾：

<script>
function search() {
    let studentID = document.querySelector("#studentid").value;
    alert(studentID);
}
function insert() {
    let firstName = document.querySelector("#fname").value;
    alert(firstName);
}
</script>

此 HTML 代码将运行 javascript 函数“search()”或“insert()”分别在单击时执行以下操作：

创建一个变量，并将“studentid”或“fname”元素的值赋给它。
Alert()变量的内容。

单击元素所在的元素时分配给它的 onclick 属性运行s javascript。

弹出警报用户在文本框中写了什么

Pop up alert What the user have written in a textbox

html

javascript

alert

popup