How can I add two functions into another function?

I have this function that choose the options of selection depends on other select
how can I add to another function

<HTML>
<select name="ddlPassport" class="val1" id="ddlPassport" style="width: 26%" onchange = "ShowHideDiv()">
<option value="">- Pavement Type -</option>
<option value="Flexible Pavement (Asphalt)">Flexible Pavement (Asphalt)</option>
<option value="Rigid Pavement (Concrete)">Rigid Pavement (Concrete)</option>
												</select><br>
<select name="pavedist" id="pavdistrees" style="width: 26%">
    <option value="">- Distress selections - </option>
</select><br> </div>
<script>
$(document).ready(function() {$("#ddlPassport").change(function() {  var val = $(this).val();       if (val == "Flexible Pavement (Asphalt)") {    $("#pavdistrees").html("<option value='t'>- Asphalt Distress -</option><option value='Longitudinal -Cracking-'>Longitudinal -Cracking-</option><option value='Transverse -Cracking-'>Transverse -Cracking-</option><option value='Alligator -Cracking-'>Alligator -Cracking-</option><option value='Block -Cracking-'>Block -Cracking-</option><option value='Edge -Cracking-'>Edge -Cracking-</option><option value='Reflection -Cracking-'>Reflection -Cracking-</option><option value='Rutting -Surface deformation-'>Rutting -Surface deformation-</option><option value='Shoving -Surface deformation-'>Shoving -Surface deformation-</option><option value='Polishing-Surface Distress-'>Polishing-Surface Distress-</option><option value='Raveling -Surface Distress-'>Raveling -Surface Distress-</option><option value='Flushing -Surface Distress-'>Flushing -Surface Distress-</option><option value='Patches'>Patches</option><option value='Potholes'>Potholes</option>");}  else if (val == "Rigid Pavement (Concrete)") {     $("#pavdistrees").html("<option value='t'>- Concrete Distress -</option><option value='Joint Seal Damage -Joint Problems-'>Joint Seal Damage -Joint Problems-</option><option value='Joint/Corner Spall -Joint Problems-'>Joint/Corner Spall -Joint Problems-</option><option value='Mid panel -Cracking-'>Mid panel -Cracking-</option><option value='Corner Break -Cracking-'>Corner Break -Cracking-</option><option value='Shattered Slab -Cracking-'>Shattered Slab -Cracking-</option><option value='Patching -Surface Distress-'>Patching -Surface Distress-</option><option value='Faulting -Surface Distress-'>Faulting -Surface Distress-</option>");}  });});
</script>
<input type="button" value="Add" onclick="addRow()">
<div id="content">
  </div>
</HTML>
<script>
function ShowHideDiv() {
        var ddlPassport = document.getElementById("ddlPassport");
        var dvPassport = document.getElementById("dvPassport");
        dvPassport.style.display = ddlPassport.value == "Flexible Pavement (Asphalt)" ? "block" : "none";
        var dvPasspor = document.getElementById("dvPasspor");
        dvPasspor.style.display = ddlPassport.value == "Rigid Pavement (Concrete)" ? "block" : "none";

    }
function addRow () {
  document.querySelector('#content').insertAdjacentHTML(
    'afterbegin',
    `<div class="row">
      <input type="text" name="name" value="" />
      <input type="text" name="value" value="" />
      <label><input type="checkbox" name="check" value="1" />Checked?</label>
      <input type="button" value="-" onclick="removeRow(this)">
    </div>`      
  )
}

function removeRow (input) {
  input.parentNode.remove()
}
</script>

How can add this ```$(document).ready(function() {
into function addrow ???

Not entirely sure what you are trying to do, mainly confused by why it seems like you have two separate <script> sections.

Typically, when using document.onready type functions you would only need one and could call whatever other functions you want to trigger when the DOM loads from inside that.

So w/ jQuery you’d do something like:

$( document ).ready(function() {
   // Some code
   addRow()
   anyOtherFunction()
});

when I doing what u said is not working for all functions

Is it throwing an error or just not running? also, do you have multiple <script> blocks on the page? I’m not sure if that could mess with things.

no it isn’t run at all
no another script … just script in the code up there

In your original post you had two codeblocks with two seperate script tags?

Gave it 10 mins trying to debug - few things I noticed:

  • if you are gonna use jQuery functions, make sure you import it before using. jQuery functions are generally any code you see that starts with $() pattern, cdn import would look like this in head:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  • Indenting code for readability will help
  • look up html shell to get baseline structure for html page structure http://htmlshell.com/

Here is ex with addRow function being called in the document ready fn:

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>

<body>

  <select name="ddlPassport" class="val1" id="ddlPassport" style="width: 26%" onchange="ShowHideDiv()">
    <option value="">- Pavement Type -</option>
    <option value="Flexible Pavement (Asphalt)">Flexible Pavement (Asphalt)</option>
    <option value="Rigid Pavement (Concrete)">Rigid Pavement (Concrete)</option>
  </select><br>
  <select name="pavedist" id="pavdistrees" style="width: 26%">
    <option value="">- Distress selections - </option>
  </select><br> </div>
  <script>
    $(document).ready(function () {
      addRow()
      $("#ddlPassport").change(function () {
        var val = $(this).val();
        if (val == "Flexible Pavement (Asphalt)") {
          $("#pavdistrees").html("<option value='t'>- Asphalt Distress -</option><option value='Longitudinal -Cracking-'>Longitudinal -Cracking-</option><option value='Transverse -Cracking-'>Transverse -Cracking-</option><option value='Alligator -Cracking-'>Alligator -Cracking-</option><option value='Block -Cracking-'>Block -Cracking-</option><option value='Edge -Cracking-'>Edge -Cracking-</option><option value='Reflection -Cracking-'>Reflection -Cracking-</option><option value='Rutting -Surface deformation-'>Rutting -Surface deformation-</option><option value='Shoving -Surface deformation-'>Shoving -Surface deformation-</option><option value='Polishing-Surface Distress-'>Polishing-Surface Distress-</option><option value='Raveling -Surface Distress-'>Raveling -Surface Distress-</option><option value='Flushing -Surface Distress-'>Flushing -Surface Distress-</option><option value='Patches'>Patches</option><option value='Potholes'>Potholes</option>");
        } else if (val == "Rigid Pavement (Concrete)") {
          $("#pavdistrees").html("<option value='t'>- Concrete Distress -</option><option value='Joint Seal Damage -Joint Problems-'>Joint Seal Damage -Joint Problems-</option><option value='Joint/Corner Spall -Joint Problems-'>Joint/Corner Spall -Joint Problems-</option><option value='Mid panel -Cracking-'>Mid panel -Cracking-</option><option value='Corner Break -Cracking-'>Corner Break -Cracking-</option><option value='Shattered Slab -Cracking-'>Shattered Slab -Cracking-</option><option value='Patching -Surface Distress-'>Patching -Surface Distress-</option><option value='Faulting -Surface Distress-'>Faulting -Surface Distress-</option>");
        }
      });
    });

    function ShowHideDiv() {
      var ddlPassport = document.getElementById("ddlPassport");
      var dvPassport = document.getElementById("dvPassport");
      dvPassport.style.display = ddlPassport.value == "Flexible Pavement (Asphalt)" ? "block" : "none";
      var dvPasspor = document.getElementById("dvPasspor");
      dvPasspor.style.display = ddlPassport.value == "Rigid Pavement (Concrete)" ? "block" : "none";

    }
    function addRow() {
      console.log('addRow')
      document.querySelector('#content').insertAdjacentHTML(
        'afterbegin',
        `<div class="row">
          <input type="text" name="name" value="" />
          <input type="text" name="value" value="" />
          <label><input type="checkbox" name="check" value="1" />Checked?</label>
          <input type="button" value="-" onclick="removeRow(this)">
        </div>`
      )
    }

    function removeRow(input) {
      input.parentNode.remove()
    }
  </script>
  <input type="button" value="Add" onclick="addRow()">
  <div id="content">
  </div>

</body>

</html>

first of all I want to thank u for trying to help me
but I think I couldn’t reach the idea I want
Now I want if user choose for example (Asphalt) each time press Add button only appear Asphalt selection

    function addRow() {
      console.log('addRow')
      document.querySelector('#content').insertAdjacentHTML(
        'afterbegin',
        `<div class="row">
<select name="pavedist" id="pavdistrees" style="width: 26%">
    <option value="">- Distress selections - </option>
  </select><br> </div>
          <input type="button" value="-" onclick="removeRow(this)">
        </div>`
      )
    }

    function removeRow(input) {
      input.parentNode.remove()
    }