实时输出的类名而不是 id？答案

【问题标题】：class name instead of id for live output?实时输出的类名而不是 id？
【发布时间】：2016-12-08 18:35:52
【问题描述】：

我有一个表单，当用户在文本字段中输入时，输出在下方可见。目前我使用'id'，所以输出仅限于一个字段。

我想做的是在用户输入时在多个文本字段中显示输出。通过编辑我在网上找到的一些代码，我已经走到了这一步，但是在尝试了几个小时后，我不知道如何从这里开始。任何帮助将非常感激。我已经把 jsbin 链接和下面的代码放在下面，以防万一它不起作用。

提前致谢

http://jsbin.com/tugulu/edit?html,js,output

html

<html>
    <head>
        <meta charset="utf-8">
        <title>Company</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <form action="begin-create-done.html" method="get">
            <fieldset>
                <p><label class="field"> Company Name </label>:
                    <span><input  type="text" name="Company"></span> <br>
                <p><label class="field"> Full Company Name </label>:
                    <span><input  type="text" name="CompanyFull"></span> <br>
                <p><label class="field"> Registration Number </label>:
                    <span><input  type="text" name="CompanyNumber"></span> <br>
                <p><label class="field"> Full Company Address </label>:
                    <span><input  type="text" name="CompanyAddress"></span> <br>
            </fieldset>  
        </form>
        Company = <span id="Company"></span><br>
        Company Full Name = <span id="CompanyFull"></span><br>
        Company Registration Number = <span id="CompanyNumber"></span><br>
        Company Address = <span id="CompanyAddress"></span>
        <script src="input.js"></script>    
    </body>
</html>

风格

fieldset {
    width: 600px;
}

label.field {
    text-align: right;
    width:200px;
    float: left;
    font-weight: bold;
    color: black;
}

input.textbox-300 {
    width: 300px;
    float: left;
}

fieldset p {
    clear: both;
    padding: 5px;
}

javascript

    // create the object that will hold the input values
var formValues = {};
function inputObj(formNR, defaultValues) { 
    var inputs = formNR.getElementsByTagName('input');
    for ( var i = 0; i < inputs.length; i++) {
        formValues[inputs[i].name] = defaultValues[i];
        if(inputs[i].type === 'text') {
            inputs[i].value = defaultValues[i];                            
            document.getElementById(inputs[i].name).innerHTML = defaultValues[i];
        }
        inputs[i].addEventListener('keyup', function() {
            formValues[this.name] = this.value;
            document.getElementById(this.name).innerHTML = this.value;
        }, false);
    }
}
    // build a little array with the defaultValues for each input
var defValues =[];
    // this will push all inputs from the given form in the formValues object.
inputObj(document.forms[0], defValues);

【问题讨论】：

标签： javascript html forms getelementbyid

【解决方案1】：

朋友帮我解决了这个问题，代码如下：

<html>
    <head>
        <meta charset="utf-8">
        <title>Company Details</title>
    </head>

    <style>fieldset {
    width: 600px;
}


label.field {
    text-align: right;
    width:200px;
    float: left;
    font-weight: bold;
    color: black;
}

input.textbox-300 {
    width: 300px;
    float: left;
}

fieldset p {
    clear: both;
    padding: 5px;
}
</style>

    <body>
        <form action="begin-create-done.html" method="get">
            <fieldset>
                <p><label class="field"> Name </label>:
                    <span><input  type="text" name="Name1"></span> <br>
            </fieldset>  
        </form>


        Name 1 = <span class="Name1"></span><br>

        Name 2  = <span class="Name1"></span><br>




        <script>
            var formValues = {};
            function inputObj(formNR, defaultValues) { 
                var inputs = formNR.getElementsByTagName('input');
                for ( var i = 0; i < inputs.length; i++) {
                    formValues[inputs[i].name] = defaultValues[i];
                    if(inputs[i].type === 'text') {
                        inputs[i].value = defaultValues[i];                            
                        outputs = document.getElementsByClassName(inputs[i].name);
                        for ( var j = 0; j < outputs.length; j++) {
                            outputs[j].innerHTML = defaultValues[i];
                        }
                    }
                    inputs[i].addEventListener('keyup', function() {
                        formValues[this.name] = this.value;
                        outputs = document.getElementsByClassName(this.name);
                        for ( var j = 0; j < outputs.length; j++) {
                            outputs[j].innerHTML = this.value;
                        }
                    }, false);
                }
            }
                // build a little array with the defaultValues for each input
            var defValues =[];
                // this will push all inputs from the given form in the formValues object.
            inputObj(document.forms[0], defValues); 
        </script>


    </body>
</html>

【讨论】：