Я хочу инициализировать App.init () после щелчка в JavaScript - PullRequest
0 голосов
/ 04 марта 2019

Я пытаюсь интегрировать калькулятор затрат на моем сайте WordPress.У меня есть 2 основные проблемы:

  1. Я хочу интегрировать несколько калькуляторов на одной странице по отдельности, поэтому я создал HTML-компоненты:

<button class="btn btn-primary" onclick="btnclick(this)" data-attr="refinance" data-toggle-dlc="modal" data-target="#dlc_calculator_modal" data-view="refinance"></button>

<script type="text/javascript" src="//secure.dominionlending.ca/calculators/js/embed.js">
</script>

<script type="text/javascript">	DLCCALCULATOR.init({ header: { type: 1 }, calculator: [1], button: { type: 3, btnText: "", aId: "", aClass: "" } });</script>

<script type="text/javascript">	DLCCALCULATOR.init({ header: { type: 1 }, calculator: [2], button: { type: 3, btnText: "", aId: "", aClass: "" } });</script>
<div class="row">
    <div class="col-md-6">
        <img src="http://faizalgarasia.com/wp-content/themes/DLCContemporary/img/widgetImages/Mortgage_Payment.svg">
    </div>
<div class="col-md">
<h2>Mortgage Payment</h2>
</div>
</div>

<p>Shave years off your Mortgage and save you thousands by using an accelerated bi-weekly mortgage payment.</p>

<a href="#" class="btn btn-primary mortgagecalculator" id="mortgagecalculator" aId="mortgagecalculator" aClass="mortgagecalculator" data-toggle-dlc="modal" data-target="#dlc_calculator_modal" data-view="mortgagecalculator">Use Now</a>

<div class="row">
    <div class="col-md-6">
       <img src="http://faizalgarasia.com/wp-content/themes/DLCContemporary/img/widgetImages/Refinance_Renewal.svg">
    </div>
<div class="col-md">
<h2>Refinance or Renewal Calculator</h2>
</div>
</div>

<p>Gives you quick access to loan options and the difference they can make in your monthly mortgage payment.</p>

<a href="#" aClass: "refinance" aId="refinance" class="btn btn-primary refinance" id="refinance" data-toggle-dlc="modal" data-target="#dlc_calculator_modal" data-view="refinance">Use Now</a>

Но всякий раз, когда я ставлю сценарии, я получаю только один калькулятор.поэтому я вывел второе решение:

Я создал оператор if else так:

<script src="text\javascrtipt">
function mortagecalculator(btn)
{
  if (btn.mortagecalculator == "mortage") 
  {
      <script type="text/javascript">	DLCCALCULATOR.init({                calculator: [1], button: { type: 3, btnText: "Use Now", aId:        "", aClass: "" } });</script>
  }
  else if (btn.mortagecalculator == "penalty")
  {
    <script type="text/javascript">	DLCCALCULATOR.init({                calculator: [2], button: { type: 3, btnText: "Use Now", aId:        "", aClass: "" } });</script>
  }
}

</script>
<--created two buttons-->

<a onlick="mortagecalculator" data-attr="mortage">Use Now</a>

<a onlick="mortagecalculator" data-attr="penalty">Use Now</a>

Вывод: он перенаправит меня на пустую страницу.

...