Question

我想在文本字段中键入我的项目的测量值，然后通过单击按钮将它们转移到相应字段的段落中。我目前的代码看起来像这样

<!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>

Answer 1

试试这个：

<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>

希望这会对你有所帮助。

Answer 2

请描述一下您的问题。

请告诉我你需要什么类型的输出。

我给你修改了html文件

＆＃13;

<!DOCTYPE html>
<html>
<body>
<table>
    <tr>
        <td id="inputmeasurements">
                        <p align=right>
                        Bust:<input type="text" name="bust" id="bust"><br>
                        Waist:<input type="text" name="waist" id="waist"><br>
                        Hips:<input type="text" name="hips" id="hips"><br>
                        Lenght:<input type="text" name="lenght" id="lenght"><br>
                        Shoulders:<input type="text" name="shoulders" id="shoulders"><br>
                        Sleeves:<input type="text" name="sleeves" id="sleeves"><br>
                        Inseam:<input type="text" name="inseam" id="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, document.getElementById("bust").value).replace(/W1/g, document.getElementById("waist").value).replace(/H1/g, document.getElementById("hips").value).replace(/L1/g, document.getElementById("lenght").value).replace(/S1/g, document.getElementById("shoulders").value).replace(/S2/g, document.getElementById("sleeves").value).replace(/I1/g, document.getElementById("inseam").value);
    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>

＆＃13;

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

2 个答案: