Javascript, how can i place value in div on class instead of id

Question

I'm working on an html form, with steps and on the last page an summary. This is working good, but now i want to show the value based on div class instead of div id, this because i want to show the value multiple times. This is the javascript:

 <SCRIPT TYPE="text/javascript">
 <!-- 
 function copyText(e)
 {    
  document.getElementById( e.name + 'preview' ).innerHTML = e.value;
 }
 //-->
 </SCRIPT> 


<script>
$("text1preview").draggable({ containment: '#dragcontainer' });
$("address1preview").draggable({ containment: '#dragcontainer' });
$("titlepreview").draggable({ containment: '#dragcontainer' });
$("zipcodepreview").draggable({ containment: '#dragcontainer' });
$("descriptionpreview").draggable({ containment: '#dragcontainer' });
$("wijkpreview").draggable({ containment: '#dragcontainer' });
$("address2preview").draggable({ containment: '#dragcontainer' });
$("tagspreview").draggable({ containment: '#dragcontainer' });
$(".catidpreview").draggable({ containment: '#dragcontainer' });
$("pricepreview").draggable({ containment: '#dragcontainer' });
</script>

And this is the summary html:

  <tr>
    <td width="220">Samenvatting</td>
    </tr>
<tr>
    <td>Categorie:</td>
    <td><div class="categoryid"></div></td>
    </tr>
  <tr>
    <td>Titel van uw object:</td>
    <td><div id="titlepreview"></div></td>
   </tr>
 <tr>
    <td>Adres:</td>
    <td><div id="address1preview">  </div> </td>
    </tr>
    <tr>
    <td>Postcode</td>
    <td><div id="zipcodepreview"></div></td>
    </tr>
    <tr>
    <td>Plaats:</td>
    <td><div id="address2preview"></div></td>
    </tr>
  <tr>
    <td>Wijk:</td>
    <td><div id="wijkpreview"></div></td>
    </tr>
  <tr>
    <td>Omschrijving:</td>
    <td><div id="descriptionpreview"></div></td>
  </tr>
  <tr>
    <td>Tags:</td>
    <td><div id="tagspreview"></div></td>
  </tr>
  <tr>
    <td>Prijs per periode:</td>
    <td><div id="pricepreview"></div></td>
  </tr>
</table>

The code that you show doesn't make much sense. Where do you use the `copyText` function? What does the `$` function do, and the `draggable` method? Is that jQuery? If so, the code is all wrong, as a selector like `'titlepreview'` would match a titlepreview tag, not a tag with that id. — Guffa, Jan 29 '13 at 10:05
in case you misses my comment in your answer (*which got deleted*) I updated my answer to include the scenario you described there (*about getting the value from a `select` element instead of an `input`*).. — Gabriele Petrioli, Jan 29 '13 at 14:11

score 1 · Answer 1 · edited May 23 '17 at 12:27

You would need something like this

 function copyText(e)
 {
    var matchingElements = document.getElementsByClassName( e.name + 'preview' ),
        matchCount = matchingElements.length,
        value = (e.nodeName === 'SELECT') ? e.options[e.selectedIndex].text : e.value;

    for (var i =0; i< matchCount; i++){
       matchingElements[i].innerHTML = value;
    }
 }

For IE compatibility see javascript document.getElementsByClassName compatibility with IE

Javascript, how can i place value in div on class instead of id

1 Answers1