how to use wordpress php functions in javascript?

Question

I have a custom page publish.php in template's root directory

    <?php
     /**
       **
       * Template Name: publish
       *
       * @package WordPress
       * @subpackage Twenty_Fourteen
       * @since Twenty Fourteen 1.0
       */
       ?>
     <link rel="stylesheet" type="text/css" href="../Asset/css/style.css">
     <script src="../Asset/scripts/script.js"></script>
    <?php
    get_header(); ?>
   <div class="col-md-12">
      <div style="background-color: #D3D3D3;height:1px;"></div>
      </div>
    <div id="primary" class="content-area">
    <main id="main" class="site-main  site-main--single" role="main">
    <div class="container-fluid">   

    <div class="col-md-5"></div>

    <div class="col-md-2">
    <div align="center" >
        <select id="typeselect" name="value" onChange="OnChangeSelect()">
            <option value="1">Featured</option><br />
            <option value="2">General</option><br />
        </select>
    </div> 
      </div><!-- type select-->

      <div class="col-md-12">
      <div style="background-color: #D3D3D3;height:1px;margin:5px"></div>
      </div>

    <div id="formbody" class="col-md-12">
      <!-- include php files here -->
    </div>

    <script>OnChangeSelect()</script>
    </div><!-- container -->
    </main> <!-- #main -->
    </div> <!-- #primary -->

<?php //get_sidebar(); ?>
<?php get_footer(); ?>

which links to the following javascript

  var val;
function OnChangeSelect()
 {
   var e=document.getElementById("typeselect");
   val = e.value;   
   if(val==2)
   {
       document.getElementById("formbody").innerHTML ="<?php get_template_part("+"publish_game_nr"+");?>";
   }
  else
    {
       document.getElementById("formbody").innerHTML ="<?php get_template_part("+"publish_game_fe"+");?>";
    }
 }

I want to change the content inside of

<div id="formbody" class="col-md-12">
   <!-- include php files here -->
</div>

in publish.php based on the option selected in dropdown menu

so I created two seprate php files publish_game_nr.php and publish_game_fe.php

in javascript am trying to change the innerhtml of div to include these PHP files using wordpress

 get_template_part()

but the files are not loaded. when I use the function directly in div tag. then the files are loaded successfully

what is the correct way to do this ?

Answer 1

尝试这个：

document.getElementById("formbody").innerHTML ="<?php get_template_part('slug'); ?>";

Answer 2

this was easy

so I changed the formbody div to

<div id="formbody" class="col-md-12">
  <div style="display:none" id="featured-div">
   <?php get_template_part("publish_game_fe") ?>
  </div>
  <div style="display:block" id="general-div">
   <?php get_template_part("publish_game_nr") ?>
  </div>
</div>

and used the following javascript code

function OnChangeSelect()
{
    var e=document.getElementById("typeselect");
    var val = e.value;  
          if(val==1){
         document.getElementById("general-div").style.display="block";
         document.getElementById("featured-div").style.display="none";
      }
      else{
         document.getElementById("general-div").style.display="none";
         document.getElementById("featured-div").style.display="block";
      }
}