sweve sweve - 17 days ago 4
HTML Question

Angular2: Trying to change a label from the onclick function of clicking a button next to an input form

Screenshot of webpage I'm trying to change:

Screenshot of webpage

I'm trying to change the "0" to "4534534" when I click the "Click here to bid" button.

Here is the full project code (without the nodes_modules folder).

Here is the .ts file code

import {Component, OnInit} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {Hero} from './hero';
import {HeroService} from './hero.service';

@Component({
selector: 'BiddingPageComponent',
templateUrl: 'app/BiddingPage.component.html',
styleUrls: ['app/BiddingPage.component.css'],
providers: [HeroService],
directives: [ROUTER_DIRECTIVES]
})

export class BiddingPageComponent{

slot1 = 0;
myFunction()
{
this.slot1 = this.slot1;
}
}


Here is the only part of the .html file that I actually want to change:

Bid slot 1: <p> {{slot1}}</p>
<p>



</p>
<form>


<form>
<label for="name">Enter your bid: </label>
<input type="number" class="form-control" required>
<button onclick=myFunction(slot1)>Click here to bid.</button>


Here is the .html code:

<html>
<center>
<h3>Bidding Page</h3>
</center>
<p>
</p>
<p>
</p>
<form>
<img src="http://weknowyourdreamz.com/images/apple/apple-05.jpg" alt="Apple" style="width:100px;height:100px;">
<p>
</p>
<label for="name">Apple </label>
<p>
</p>
<label for="name">Original Price: $1.00 </label>
<p>
</p>
Description of item’s current condition:
<p>
</p>
<label for="name">Description of item’s current condition: </label>
<label for="name">The apple is a fleshy fruit from the apple tree.
It is in the species Malus domestica in the rose family Rosaceae.
The apple is one of the most grown tree fruits. It is grown in orchards.</label>
<p>
</p>
<form>
<label for="name">
Time left on auction:
<input type="number" class="form-control" required>
<p>
</p>
<form>
<label for="name">Starting bid:</label>
<input type="number" class="form-control" required>
<p>
</p>
<label for="name">Number of bids so far: </label>
<label for="name">{{numberofbids}}</label>
<p>
</p>
Bid slot 1:
<p> {{slot1}}</p>
<p>
</p>
<form>
<form>
<label for="name">Enter your bid: </label>
<input type="number" class="form-control" required>
<button onclick=myFunction(slot1)>Click here to bid.</button>
<p>
</p>
<button>Click here to return to the top.</button>




<!--
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->

Answer

As i assumed you want to send value of number filed on button click as parameter, so basically for this approach , you have to define local variable and value of that variable send as parameter like this :-

<label for="name">Enter your bid: </label>
<input type="number" #bid class="form-control" required>

<button (click)='myFunction(bid.value)'>Click here to bid.</button>
[or you can also use `on-click="myFunction(bid.value)"` both are same]

slot1 = 0;
myFunction(slotvalue) 
 {
        this.slot1 = slotvalue;
 }

and if you dont want to send parameter you can get value using @viewchild like this : -

<label for="name">Enter your bid: </label>
<input type="number" #bid class="form-control" required>

<button (click)='myFunction()'>Click here to bid.</button>

slot1 = 0;
@ViewChild('bid')bid:any = null;
 myFunction(slotvalue) 
{
        this.slot1 = this.bid.nativeElement.value;
}