の代わりにクラス名を使用しますか？

私はフォームを持っており、ユーザーがテキストフィールドに入力すると、出力はさらに下に見えます。現時点では「id」を使用しているので、出力は1つのフィールドのみに制限されています。の代わりにクラス名を使用しますか？

私がしたいのは、ユーザーが入力中に複数のテキストフィールドに出力を表示することです。私はオンラインで見つけたいくつかのコードを編集するだけでこれまでのことができましたが、数時間試した後にここから進める方法はわかりません。どんな助けでも大歓迎です。私は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);

出典

2016-12-08 TopGangMember

友人がこれを解決するのを手伝ってくれました。以下のコード：

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

出典

2016-12-16 11:29:24 TopGangMember

の代わりにクラス名を使用しますか？

答えて

関連する問題