Dropdown change will populate the two textbox values in javascript?

enter image description here

There are two textboxes in this image one is theory and other is practical. Theory and practical both has different values. so for changing dropdown values every dropdown value has different marks that are hardcorded. so i want a jsf page that has javascript query to solve this problem.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">
<h:head>
<script>
    function myfun(){
        document.getElementById("the").value="42";
        document.getElementById("prac").value="14";

    }
</script>
</h:head>
<h:body>
<h:form name="myform">
    Select Subject: 
    <h:selectOneMenu id="mylist" onchange="myfun()" >
        <f:selectItem itemValue="PC Architecture" itemLabel="PC Architecture"/>
        <f:selectItem itemValue="PC Hardware 1" itemLabel="PC Hardware 1" />
        <f:selectItem itemValue="PC Hardware 2" itemLabel="PC Hardware 2" />
        <f:selectItem itemValue="Microprocessor Interfacing devices_Embedded System" itemLabel="Microprocessor Interfacing devices_Embedded System" />
        <f:selectItem itemValue="C#" itemLabel="C#" />
        <f:selectItem itemValue="Data Structures" itemLabel="Data Structures" />
        <f:selectItem itemValue="Operating System" itemLabel="Operating System" />
        <f:selectItem itemValue="SQL Server" itemLabel="SQL Server" />
        <f:selectItem itemValue="Networking" itemLabel="Networking" />
        <f:selectItem itemValue="Advance Computer Concept_Data Security" itemLabel="Advance Computer Concept_Data Security" />
        <f:selectItem itemValue="Value Added Services" itemLabel="Value Added Services" />
    </h:selectOneMenu>
    Theory: 
    <h:inputText value="#{subject.theory}" id="theory" label="Theory marks" readonly="true"/><br></br><br></br>
    Practical: 
    <h:inputText value="#{subject.practical}" id="prac" label="practical marks" readonly="true"/><br></br><br></br>
    Year:
    <h:inputText value="#{subject.year}" label="Enter year"/><br></br><br></br>
    Instructor:
    <h:inputText value="#{subject.instructor}" label="Instructor name"/><br></br><br></br>

    <h:commandButton value="submit" style="margin:20px"
        action="#{sDao.addSubject(subject)}" ></h:commandButton>
</h:form>
</h:body>
</html>