Call JS method in another file on click event in HTML

Ionic Framework ionic-v3
1

I am out of steam and could really use some help. Eventually I will want to send JSON requests and responses on click events in my app, but right now I am trying to console.log("Button Pressed ID: " + id) in a JS method when my button is clicked, and my JS method is not getting called onClick.

I am seeing this reference error: ReferenceError: Can’t find variable: loginPressed

login.ts:
loginPressed(id) {
console.log("Button Pressed ID: " + id)
}

login.html:

<ion-header>
  <ion-navbar>
      <div class="spacer" style="height: 40px;"></div>
      <script type="text/javascript" src="src/pages/login/login.ts"></script>
    <ion-title>
      Login
    </ion-title>
    <ion-list id="login-list2">
        <label class="item item-input item-floating-label" id="login-input1">
          <span class="input-label">Email</span>
          <input type="email" placeholder="Email">
        </label>
        <label class="item item-input item-floating-label" id="login-input2">
          <span class="input-label">Password</span>
          <input type="password" placeholder="Password">
        </label>
        **<button id="loginButton" onclick="loginPressed(this.id)">Log in!</button>**
      </ion-list>
  </ion-navbar>
</ion-header>

<ion-content padding>

</ion-content>

Any help or examples you know of that use the ionic framework and JSON as well as using the JS files heavily would be really awesome. I can’t find the right stuff online.

Thanks so much,
Kayla

2

This is extremely unidiomatic. You should not have <script> tags referencing controller pages; let the Angular compiler do its work and simply define loginPressed in the component which references this template.

3

Thanks, @rapropos. This was my best compilation of different stack overflow articles and such. I am not able to find a great example online of something that uses a buttonID to call a JS method. Do you know of any such resource? I think one or two examples would help me grasp the concept.

Thanks so much.

4

You are using Angular, right? Either ionic-angular or @ionic/angular?

5

Yes, I’m using ionic-angular, with ionic version 4.0.6

6

Then I would suggest emulating the ionic-conference-app login feature.