javascripthtml-framework-7

How to link HTML page to JavaScript file in Framework7


I am new in framework7 I want to link my html page with Javascript file

this is how my html file looks like:

 <div class="page-content" id="details-form">
      <div class="block-title">Utility Details</div>
      <div class="list no-hairlines-md">
        <ul>
          <li>
            <div class="item-content item-input">
              <div class="item-inner">
                <div class="item-title item-label"> Meter Number</div>
                <div class="item-input-wrap">
                  <input type="number" name="meterNumber" placeholder="meterNumber" required="required" />
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content item-input">
              <div class="item-inner">
                <div class="item-title item-label">Amount</div>
                <div class="item-input-wrap">
                  <input type="number" name="amount" placeholder="Amount" required="required" />
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <!-- <div class="block block-strong"> -->
        <p class="row">
          <a href="#" class="col button button-fill" id="paymentbtn">Purchase</a>
        </p>
      <!-- </div> -->
    </div>

it is just a simple form that captures data, I want the javascript file to be executed when purchase button is clicked.

below is my simple javascript file:

$$(document).on('page:init', '.page[data-name="utilityForm"]', function (e) {
   
    $$('#paymentbtn').on('click', function (e) {

        console.log ("purchase eletricity buttton clicked");
      });

  });

Solution

  • Your code is completely perfect and there are no bugs in it. You just need to add your javascript code in html file by providing a path to it: Make a new javascript file such as function.js and paste your javascript code in it. Afterwards use script tag in HTML code to link this file with HTML:

    Hope this answers your question. Feel free to ask something else.