gpt4 book ai didi

javascript - 使用来自多个输入的数据更改段落文本

转载 作者:行者123 更新时间:2023-12-03 09:23:42 24 4
gpt4 key购买 nike

我想在文本字段中输入商品的尺寸,然后通过单击按钮将这些尺寸传输到段落中的相应字段中。我当前的代码如下所示

<!DOCTYPE html>
<html>
<body>
<table>
<tr>
<td id="inputmeasurements">
<p align=right>
Bust:<input type="text" name="bust"><br>
Waist:<input type="text" name="waist"><br>
Hips:<input type="text" name="hips"><br>
Lenght:<input type="text" name="lenght"><br>
Shoulders:<input type="text" name="shoulders"><br>
Sleeves:<input type="text" name="sleeves"><br>
Inseam:<input type="text" name="inseam"><br>
</p>
</td>
<td id="finishedmeasurements">
<p id="m1" align=left><FONT size=3 face=Trebuchet MS>
B1 Bust inches flat </br>
W1 Waist inches flat </br>
H1 Hips inches flat </br>
L1 Length </br>
S1 Shoulders </br>
S2 Sleeves </br>
I1 Inseam </br>
</FONT></p>
</td>
</tr>
</table>

<p>This is a test for measurements entering and copying to metadata</p>
<button onclick="myFunction2()">Enter</button>
<script>
function myFunction2() {
var str = document.getElementById("m1").innerHTML;
var res = str.replace(/B1/g, "bust").replace(/W1/g, "waist").replace(/H1/g, "hips").replace(/L1/g, "lenght").replace(/S1/g, "shoulders").replace(/S2/g, "sleeves").replace(/I1/g, "inseam");
document.getElementById("m1").innerHTML = res;
}
</script>
<button onclick="myFunction3()">New</button>
<script>
function myFunction3() {
window.location.reload();
}
</script>
</body>
<style>
#finishedmeasurements {
font-family: Trebuchet MS;
line-height: 24px;
}
#inputmeasurements {
font-family: Trebuchet MS;
padding-right: 20px;
line-height: 23px;
}
input {
width: 30px !important;
margin-left: 5px;
}
</style>
</html>

最佳答案

试试这个:

<table>
<tr>
<td id="inputmeasurements">
<p align=right>
Bust:<input type="text" name="bust" class="bust"><br>
Waist:<input type="text" name="waist" class="waist"><br>
Hips:<input type="text" name="hips" class="hips" ><br>
Lenght:<input type="text" name="lenght" class="lenght" ><br>
Shoulders:<input type="text" name="shoulders" class="shoulders" ><br>
Sleeves:<input type="text" name="sleeves" class="sleeves" ><br>
Inseam:<input type="text" name="inseam" class="inseam" ><br>
</p>
</td>
<td id="finishedmeasurements">
<p id="m1" align=left><FONT size=3 face=Trebuchet MS>
B1 Bust inches flat </br>
W1 Waist inches flat </br>
H1 Hips inches flat </br>
L1 Length </br>
S1 Shoulders </br>
S2 Sleeves </br>
I1 Inseam </br>
</FONT></p>
</td>
</tr>
</table>

<p>This is a test for measurements entering and copying to metadata</p>
<button class='enter'>Enter</button>

<button class="new">New</button>

<script>

$(function() {
$('.new').on('click', function() {
location.reload();
});

$('.enter').on('click', function() {
var str = document.getElementById("m1").innerHTML;
var bust = $('.bust').val();
var waist = $('.waist').val();
var hips = $('.hips').val();
var lenght = $('.lenght').val();
var shoulders = $('.shoulders').val();
var sleeves = $('.sleeves').val();
var inseam = $('.inseam').val();
var res = str.replace(/B1/g, bust).replace(/W1/g, waist).replace(/H1/g, hips).replace(/L1/g, lenght).replace(/S1/g, shoulders).replace(/S2/g, sleeves).replace(/I1/g, inseam);
document.getElementById("m1").innerHTML = res;
});
});

</script>

<style>
#finishedmeasurements {
font-family: Trebuchet MS;
line-height: 24px;
}
#inputmeasurements {
font-family: Trebuchet MS;
padding-right: 20px;
line-height: 23px;
}
input {
width: 30px !important;
margin-left: 5px;
}
</style>

希望这对您有帮助。

关于javascript - 使用来自多个输入的数据更改段落文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31759089/

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