CODEWITHSUNDEEP
javascripthtmlangular
user6298396
user6298396

Reputation:

Angular2: Unexpected Token error & displaying input into a variable

The basic idea for this website is an ebay clone. For this question, I'm trying to build the bidding webpage.

Screenshot of error: enter image description here

Link to full project without the nodes_modules folder: enter link description here

I'm trying to make a variable that will display the bid that the user enters after clicking a button. I'm not sure whether I need to create a constructor with an array of bids or not.

.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
{
       var slot1 = 0;
       myFunction() 
      {
           slot1 = "{{slot1}}";
      }
}

The only part of the .html file that I need to change:

Bid slot 1: 

<input type="number" name="fname" value={{slot1}}><br>

The full .html file 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>
  <label for="name">Original Price: $1.00 </label> Description of item’s current condition:
  <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: <input type="number" name="fname" value={{slot1}}><br> Bid slot 2: <input type="number" name="fname" value={{slot2}}><br> Bid slot 3: <input type="number" name="fname" value={{slot3}}><br> Bid slot 4: <input type="number" name="fname"
      value={{slot4}}><br> Bid slot 5: <input type="number" name="fname" value={{slot5}}><br> Bid slot 6: <input type="number" name="fname" value={{slot6}}><br> Bid slot 7: <input type="number" name="fname" value={{slot7}}><br>
  </form>​
</form>
<p></p>
<form>
<form>
    <label for="name">Enter your bid: </label>
    <input type="number" class="form-control" required>
    <button onclick="myFunction()">Click here to bid.</button>
    <p></p>
    <button>Click here to return to the top.</button>

Upvotes: 0

Views: 171

Answers (1)

siva636
siva636

Reputation: 16451

Because you are doing Typescript, simply remove the var from var slot1 = 0;

Upvotes: 2

Related Questions