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