Editing cells of a table in html using Javascript function

Question

I'm trying to modify the content of a cell in a table (HTML) using Javascript dynamically.

We have a select input, and when the user change the value of the selection, some items in the other cells should change respectively.

This is my html code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Drug Shopping Cart</title>

<script type="text/javascript" src="drugShoppingCart.js"></script>

</head>

<body>

<h1 style="text-align:center">Drug shopping cart</h1>

<h2 style="text-align:center">Please enter your age & weight then choose what medicaments you want to buy to calculte the total price.</h2>

<div style="text-align:center">
<input type="text" value="Age" id="getAge" />
<input type="text" value="Wieght" id="getWeight" /> 
</div>

<br />
<div style="border:groove; border-color:#006; background-color:rgb(0,51,153); color:rgb(255,255,255)">
<table cellspacing="50" id="shopTable" align="center">
<th>Drug Name</th><th>Price</th><th>Amount</th><th>Allergic</th><th>Amount of drug per item</th><th>Daily dose</th>
</table>

<br />

<input type="button" value="Add a new item" onClick="addTable()">
<br />

</div>
<br />





</body>
</html>

and this is the Javascript:

// JavaScript Document

var price;
var price1=5;
var price2=10;
var price3=15;
var price4=20;
var i=0;  //Global counter - counts the number of rows


var dropDown;

function selectChange(){
              alert(dropDown.value);  //keep a track if the event is working..

              if(dropDown.value==2)
              price=price2;


           }


function addTable(){
    i++;

var table=document.getElementById("shopTable");




{
    var age=document.getElementById("getAge");
    var weight=document.getElementById("getWeight");

    var row = table.insertRow(1);
    var cell1= row.insertCell(0);
    var cell2= row.insertCell(1);
    var cell3= row.insertCell(2);
    var cell4= row.insertCell(3);
    var cell5= row.insertCell(4);
    var cell6= row.insertCell(5);

        cell1.innerHTML= "<select id=\"selectMenu\" onchange=\"selectChange()\">" +
           "<option value='1'>Paracetamol</option>" +
           "<option value='2'>Ibuprofen</option>" +
           "<option value='3'>Saxagliptin</option>"+
           "<option value='4'>Liraglutide</option>"+
           "</select>";

           dropDown= document.getElementById("selectMenu");

    cell2.innerHTML=price;     

           //cell3.innerHTML="";   //" <input type='text' id='amount' value='Enter the amount here' />";
           //cell4.innerHTML="";
           //cell5.innerHTML="";
           //cell6.innerHTML="";




}

}

cell2.innerHTML refers to the global variable price. By changing the value of this variable using the onchange event, nothing is happening and it keeps showing undefined .

Do you know the solution? I should have 4 values depending on the user selection.

Answer 1

The assignment cell2.innerHTML=price; is executed only in the addTable , where the right hand side is initially undefined. It needs to be executed after computing the price, in the event handler.

There are various ways to fix, and the code should probably be refactored (rewritten), but a rather minimal (and somewhat ugly) fix is to make cell2 a global variable.

In the following code, I have made just the following other basic fixes: 1) To assign the price, it is much more convenient to use an array rather than individual variables for each price. 2) A select element should normally contain a dummy option as the first one; here this prevents a situation where the first drug initially appears as selected but no price is shown.

 <script type="text/javascript" > var prices = ['', 5, 10, 15, 20]; var i=0; //Global counter - counts the number of rows var cell2; var dropDown; function selectChange(selection) { cell2.innerHTML = prices[selection.selectedIndex]; } function addTable(){ i++; var table=document.getElementById("shopTable"); { var age=document.getElementById("getAge"); var weight=document.getElementById("getWeight"); var row = table.insertRow(1); var cell1= row.insertCell(0); cell2= row.insertCell(1); var cell3= row.insertCell(2); var cell4= row.insertCell(3); var cell5= row.insertCell(4); var cell6= row.insertCell(5); cell1.innerHTML= "<select id=\\"selectMenu\\" " + "onchange=\\"selectChange(this)\\">" + "<option value=''>Select a drug:</option>" + "<option value='1'>Paracetamol</option>" + "<option value='2'>Ibuprofen</option>" + "<option value='3'>Saxagliptin</option>"+ "<option value='4'>Liraglutide</option>"+ "</select>"; } } </script> </head> <body> <h1 style="text-align:center">Drug shopping cart</h1> <h2 style="text-align:center">Please enter your age & weight then choose what medicaments you want to buy to calculte the total price.</h2> <div style="text-align:center"> <input type="text" value="Age" id="getAge" /> <input type="text" value="Wieght" id="getWeight" /> </div> <br /> <div style="border:groove; border-color:#006; background-color:rgb(0,51,153); color:rgb(255,255,255)"> <table cellspacing="50" id="shopTable" align="center"> <th>Drug Name</th><th>Price</th><th>Amount</th><th>Allergic</th><th>Amount of drug per item</th><th>Daily dose</th> </table> <br /> <input type="button" value="Add a new item" onClick="addTable()"> <br /> </div>

Editing cells of a table in html using Javascript function

Question

1 answers

solution1
0 ACCPTED 2014-12-28 15:06:08

Editing cells of a table in html using Javascript function

Question

1 answers

solution1 0 ACCPTED 2014-12-28 15:06:08

solution1
0 ACCPTED 2014-12-28 15:06:08