how to use JS to dynamically update innerHTML

0
votes

I have a drop down box, each option in it has 2 values. I want to dynamically update value in my HTML based on the selection. The value that has to be shown is derived from drop down box values. Here is my code, but nothing seems to be happening here. 

<html>

    <head><title></title>

    <script type="text/javascript">

var a = new Array();
a[1] = "kgs"; 
a[2] = "gms"; 
a[3] = "ltrs"; 
a[4] = "ml"; 
a[5] = "nos"; 

window.onload = function() {

function updateunit(){

var b = document.getElementById("itemname");

var b1 = b.options[b.selectedIndex].value;

var c = b1.split(',');

var d = c[1];

var e = a[d];

alert(document.write(a[1]));

document.getElementById('pane2').innerHTML = b1 ;

}



updateunit()

document.getElementById('itemname').onchange = updateunit ;

}    

</script></head>


<body>

<form action='production.php' method="POST"> 

Item Name <select name ="itemname" id = "itemname">
<option value = '1,5' > A </option>
<option value = '2,5' > B </option>
<option value = '3,5' > C </option>
<option value = '4,5' > D </option>
</select> <br>



Amount <input type="text" name="amount"> <span id = "pane2"></span> <br>

</form>        

</body>

</html>
4
javascript
What's kgs/gms/ltrs/ml/nos? You have to define them. Your code failed to work because there are errors at the beginning, not because it doesn't work. – Alvin Wong
BTW please get familiar with jsfiddle :) it's useful – Kos
they are strings..have updated it by putting qoutes. Still nothing is happening! – calvin12

4 Answers

1
votes

I hope you are trying to achieve this. http://jsfiddle.net/nsjithin/SbtSF/

  1. To get the value of the selected dropdown you just need to elem.value
  2. Put the updateunit function as global, not in window.onload function.
  3. Arrays starts with index 0. So when spliting don't say c[1], it will give you 5 always, get value from c[0].
0
votes
Javascript is case sensitive

Check code syntax it should be selectedIndex --

and plz use this -- alert(a[1]); and let me know if its working or not

    var a = new Array();
    a[1] = 'kgs'; 
    a[2] = 'gms'; 
    a[3] = 'ltrs'; 
    a[4] = 'ml'; 
    a[5] = 'nos'; 

    window.onload = function() {

    function updateunit(){

    var b = document.getElementById("itemname");

var b1 = b.options[b.selectedIndex].value;

NEW EDIT

This is the code i saved under my xampp->htdocs as name.php and the code goes like this and i tested in browser as -- localhost/name.php

<?php
/*
I have a drop down box, each option in it has 2 values. I want to dynamically update value in my HTML based on the selection. The value that has to be shown is derived from drop down box values. Here is my code, but nothing seems to be happening here. 
*/
?>

    <html>

        <head><title></title>

        <script type="text/javascript">

    var a = new Array();
    a[1] = 'kgs'; 
    a[2] = 'gms'; 
    a[3] = 'ltrs'; 
    a[4] = 'ml'; 
    a[5] = 'nos'; 

    window.onload = function() {

    function updateunit(){

    var b = document.getElementById("itemname");

    var b1 = b.options[b.selectedIndex].value;

    var c = b1.split(',');

    var d = c[1];

    var e = a[d];

    alert(a[1]);

    document.getElementById('pane2').innerHTML = b1 ;

    }



    updateunit()

    document.getElementById('itemname').onchange = updateunit ;

    }    

    </script></head>


    <body>

    <form action='production.php' method="POST"> 

    Item Name <select name ="itemname" id = "itemname">
    <option value = '1,5' > A </option>
    <option value = '2,5' > B </option>
    <option value = '3,5' > C </option>
    <option value = '4,5' > D </option>
    </select> <br>



    Amount <input type="text" name="amount"> <span id = "pane2"></span> <br>

    </form>        

    </body>

    </html>
0
votes
var a = ["kgs", "gms", "ltrs", "ml", "nos"];
window.onload = function() {
    updateunit();
    document.getElementById('itemname').onchange = updateunit;
}
function updateunit(evt) {
    var b1 = evt.target.value;
    if(b1) {
        var d = b1.split(',')[1];
        var e = a[d - 1];
        document.getElementById('pane2').innerHTML = e ;
    }  

}
-2
votes

Instead of :

document.getElementById('pane2').innerHTML = b1 ;

Use :

document.getElementById('pane2').html(b1);

Reference : http://api.jquery.com/html/