gpt4 book ai didi

javascript - 如何通过jQuery的点击函数获取用户输入

转载 作者:行者123 更新时间:2023-11-28 18:33:28 25 4
gpt4 key购买 nike

我正在尝试在地址簿的按钮元素上使用单击功能。我想在单击按钮时获取联系人姓名和号码的用户输入,但我收到了

"Unexpected identifier" error.

我的联系人存储在我的 html 文档的表格中;这是我的代码:

$(document).ready(function() {
$('#add').click(function() {

var toAddName = $('input[name=contact]').val();
var toAddNum = $('input[name=number]').val();

$('#contacts').append('<tr><th>'+toAddName+'</th><td>'+toAddNum+'</td></tr>');
});
});

我也尝试过这个:

var name = prompt("Name: ");
var number = prompt("Number: ");

$(document).ready(function() {
$('#add').click(function() {
$('table').append('<tr><th>'name'</th><td>'number'</td></tr>');
});
});

这是我的所有 JS/CSS/HTML 代码:

(P.S.我知道我的 javascript 和 css 都链接到了 html,但我正在使用一个代码编辑器来为我做这件事)

var name = prompt("Name: ");
var number = prompt("Number: ");

$(document).ready(function() {
$('#add').click(function() {
$('table').append('<tr><th>'name'</th><td>'number'</td></tr>');
});
});
table {
font-size: 20px;
margin-left: 10px;
margin-top: 15px;
}

th {
padding-right: 100px;
}

#add {
display: inline-block;
padding-left: 10px;
padding-right: 10px;
font-size: 14px;
margin-right: 50px;
color: blue;
}

#del {
display: inline-block;
padding-left: 10px;
padding-right: 10px;
font-size: 14px;
color: red;
}
<html>
<title>Address Book</title>
<div>
<h1>Contacts:</h1>
</div>

<div id="add">
<button><strong>New Contact</button>
</div>

<div id="del">
<button>Delete Contact</strong></button>
</div>

<div>
<table>

<tr>
<th>Name1</th>
<td>555-555-5555</td>
</tr>

<tr>
<th>Name2</th>
<td>555-555-5555</td>
</tr>

<tr>
<th>Name3</th>
<td>555-555-5555</td>
</tr>

<tr>
<th>Name4</th>
<td>555-555-5555</td>
</tr>

<tr>
<th>Name5</th>
<td>555-555-5555</td>
</tr>

</table>
</div>

</html>

最佳答案

您需要连接名称号码。另外,在下面的代码中,一旦点击新联系人

,我就会提示输入 namenumber

$(document).ready(function() {
$('#add button').click(function() { // bind to button
var name = prompt("Name: ");
var number = prompt("Number: ");
$('table').append('<tr><th>' + name + '</th><td>' + number + '</td></tr>');
});
});
table {
font-size: 20px;
margin-left: 10px;
margin-top: 15px;
}
th {
padding-right: 100px;
}
#add {
display: inline-block;
padding-left: 10px;
padding-right: 10px;
font-size: 14px;
margin-right: 50px;
color: blue;
}
#del {
display: inline-block;
padding-left: 10px;
padding-right: 10px;
font-size: 14px;
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<title>Address Book</title>
<div>
<h1>Contacts:</h1>
</div>

<div id="add">
<button><strong>New Contact</button>
</div>

<div id="del">
<button>Delete Contact</strong>
</button>
</div>

<div>
<table>

<tr>
<th>Name1</th>
<td>555-555-5555</td>
</tr>

<tr>
<th>Name2</th>
<td>555-555-5555</td>
</tr>

<tr>
<th>Name3</th>
<td>555-555-5555</td>
</tr>

<tr>
<th>Name4</th>
<td>555-555-5555</td>
</tr>

<tr>
<th>Name5</th>
<td>555-555-5555</td>
</tr>

</table>
</div>

</html>

关于javascript - 如何通过jQuery的点击函数获取用户输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37536971/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com