Question 184548 in Javascript Question posted in
A very good W3school tutorial can be found here.

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");
      });

  });
Tags:

2

Answers


  1. 0

    You put this JavaScript <script src="./yourfilename.js"> </script> link in the head tag or above the body close tag and give the name of your JavaScript file here in src="" . You can use dots (.) and slashes (/) if necessary.

    <!DOCTYPE html>
<html>
<head>
  <title>My App</title>

  <script src="path/to/script.js"></script>

  <!-- Framework7 initialization script -->

  <script src="your file name put here"></script>

  <!-- Other script tags or stylesheets -->
</head>
<body>
  <!-- Your HTML content -->
</body>
</html>
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search