just for understanding a created a vf page as given above. So once I select City, Area is auto populated. I input a value tto code. So Total field should get calculated on change. However it is not calculated. in console it is showing that document.getElementById("--Area ID--") is not defined`l

Please refer the VF page and Controller class below:

-----------------------------------
<apex:page controller="dynamicpicklist1" sidebar="false" >
<apex:form >
<script>
function myFunction(){

debugger;

var a= parseInt(document.getElementById('newvalue').value);
var b=parseInt(document.getElementById("it").value);
var c= a*b;
document.getElementById("total").value=c;
}

</script>
<apex:sectionHeader title="Dynamic Picklist" subtitle="Reusable code"/>
<apex:pageblock >
<apex:pageBlockSection title="Dynamic picklist" columns="1">
      <apex:pageblocksectionItem >
          <apex:outputlabel value="City" for="values" />
          <apex:selectList value="{!city}" size="1" id="values">
              <apex:actionSupport event="onchange" reRender="newvalue" action="{!saverec}"/>
              <apex:selectOptions value="{!citynames}"/>
          </apex:selectList>
      </apex:pageblocksectionItem>      
        <apex:pageblocksectionItem >
          <apex:outputlabel value="Area" for="newvalue" />
          <apex:selectList value="{!area}" size="1" id="newvalue">
              <apex:selectOptions value="{!areas}"/>
          </apex:selectList>         
           </apex:pageblocksectionItem>
           <apex:pageBlockSection >
      <apex:inputText label="Code" id="it" onchange="myFunction()" />
      </apex:pageBlockSection>       
      <apex:pageBlockSection >
      <apex:inputText label="Total" id="total" />
      </apex:pageBlockSection>                                 
         
  </apex:pageblocksection>
</apex:pageblock>
</apex:form>
</apex:page>

-------------------
controller
---------------------

public class dynamicpicklist1
{
public String city{get; set;}
public String area{get; set;}
public  List<SelectOption> areas{get; set;}

public dynamicpicklist1(){
    areas = new List<SelectOption>();
    areas .add(new SelectOption('--None--','--None--'));
    
}
public List<SelectOption> getcitynames()
{
  List<SelectOption> options = new List<SelectOption>();
  options.add(new SelectOption('--None--','--None--'));
  options.add(new SelectOption('Kolkata','Kolkata'));
  options.add(new SelectOption('Bangalore','Bangalore'));
  return options;
}
public String newpicklistvalue{get; set;}

public void saverec()
{
  areas = new List<SelectOption>();
  if(city == 'Kolkata'){
      areas.add(new SelectOption('1','1'));
      areas.add(new SelectOption('2','2'));
      areas.add(new SelectOption('3','3'));
  }
  else if(city == 'Bangalore'){
      areas.add(new SelectOption('4','4'));
      areas.add(new SelectOption('5','5'));
      areas.add(new SelectOption('6','6'));
  }
  else{
      areas .add(new SelectOption('--None--','--None--'));
  }
}

}
-----------------------
Please let me know if you can find a solution