class name instead of id for live output?

问题

I have a form, and as the user inputs in the text field the output is visible further down. At the moment im using 'id' so the output is limited to one field only.

What I would like to do is have the output visible in more than one text field while the user is typing. I've got this far just by editing some code I found online, but i dont know how to proceed from here after having tried for a few hours. Any help would be much appreciated. I've put the jsbin link below and also the code below that just in case it doesnt work.

Thanks in advance

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>

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

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

回答1:

A friend helped me fix this up, code below:

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

来源：https://stackoverflow.com/questions/41046522/class-name-instead-of-id-for-live-output

标签

javascript

html

forms

getelementbyid