В классе не видит addStuffin()

304
15 апреля 2018, 21:08

'use strict'; 
var result = document.getElementById('result'); 
var but = document.forms.burger.elements.order; 
var sizeBurger = document.forms.burger.elements.sizeBurger; 
var stuffingStaf = document.forms.burger.elements.stuffingStaf; 
var cheese = document.forms.burger.elements.cheese; 
var salad = document.forms.burger.elements.salad; 
var potato = document.forms.burger.elements.potato; 
var mayonez = document.forms.burger.elements.mayonez; 
var spice = document.forms.burger.elements.spice; 
 
class Hamburger { 
  constructor(size, stuffing, topping) { 
    this.size = size; 
    this.stuffing = stuffing; 
    this.topping = topping; 
  } 
 
  static get SMALLPRICE() { 
    return 50 
  } 
  static get LARGEPRICE() { 
    return 100 
  } 
  static get CHEESEPRICE() { 
    return 10 
  } 
  static get SALADPRICE() { 
    return 20 
  } 
  static get POTATOPRICE() { 
    return 15 
  } 
  static get MAYONEZPRICE() { 
    return 20 
  } 
  static get SPICEPRICE() { 
    return 15 
  } 
 
  addStuffin() { 
    var stufPrise = 0; 
    if (this.stuffing == "cheese") { 
      stufPrise += Hamburger.CHEESEPRICE; 
    } 
    if (this.stuffing == 'salad') { 
      stufPrise += Hamburger.SALADPRICE; 
    } 
    if (this.stuffing == "potato") { 
      stufPrise += Hamburger.POTATOPRICE; 
    } 
    return stufPrise; 
  } 
  calculatePrice() { 
    if (this.size == "small") return Hamburger.SMALLPRICE + this.addStuffin(); 
    if (this.size == "large") return Hamburger.LARGEPRICE + this.addStuffin(); 
    else return null; 
  } 
} 
 
but.addEventListener('click', function() { 
  var burgerNew = new Hamburger(sizeBurger.value); 
  var stafNew = new Hamburger(stuffingStaf.value); 
  result.innerHTML = "Buger cost " + burgerNew.calculatePrice() + '$'; 
  console.log(burgerNew.calculatePrice()) 
  console.log(stafNew.addStuffin()) 
})
<form name="burger"> 
  <fieldset> 
    <legend>Select size</legend> 
    <label> 
          <img src="images/small.jpg" alt=""/> 
          <input type="radio" name="sizeBurger" value="small"/> 
        </label> 
    <label> 
          <img src="images/large.jpg" alt=""/> 
          <input type="radio" name="sizeBurger" value="large"/> 
        </label> 
  </fieldset> 
  <fieldset> 
    <legend>Select stuffing</legend> 
    <label> 
          <img src="images/cheese.jpg" alt=""/> 
          <input type="checkbox" name="stuffingStaf" value="cheese"/> 
        </label> 
    <label> 
          <img src="images/salad.jpg" alt=""/> 
          <input type="checkbox" name="stuffingStaf" value="salad"/> 
        </label> 
    <label> 
          <img src="images/potato.jpg" alt=""/> 
          <input type="checkbox" name="stuffingStaf" value="potato"/> 
        </label> 
  </fieldset> 
  <fieldset> 
    <legend>Select topping</legend> 
    <label> 
          <img src="images/mayonez.jpg" alt=""/> 
          <input type="checkbox" name="mayonez" value="mayonez"/> 
          </label> 
    <label> 
          <img src="images/spice.jpg" alt=""/> 
          <input type="checkbox" name="spice" value="spice"/> 
          </label> 
  </fieldset> 
  <input type="button" class="button" value="ORDER" name="order" /> 
</form> 
<h3 id="result"></h3>

Answer 1

В вашем коде stuffing конструктор класса принимает вторым параметром, но вы его не передаёте.

  var burgerNew = new Hamburger(sizeBurger.value);
  var stafNew = new Hamburger(stuffingStaf.value);

замените на

  var burgerNew = new Hamburger(sizeBurger.value, stuffingStaf.value);
  var stafNew = new Hamburger(sizeBurger.value, stuffingStaf.value);

Плюс поменяте stuffing c checkbox на radio

'use strict'; 
var result = document.getElementById('result'); 
var but = document.forms.burger.elements.order; 
var sizeBurger = document.forms.burger.elements.sizeBurger; 
var stuffingStaf = document.forms.burger.elements.stuffingStaf; 
var cheese = document.forms.burger.elements.cheese; 
var salad = document.forms.burger.elements.salad; 
var potato = document.forms.burger.elements.potato; 
var mayonez = document.forms.burger.elements.mayonez; 
var spice = document.forms.burger.elements.spice; 
 
class Hamburger { 
  constructor(size, stuffing, topping) { 
    this.size = size; 
    this.stuffing = stuffing; 
    this.topping = topping; 
  } 
 
  static get SMALLPRICE() { 
    return 50 
  } 
  static get LARGEPRICE() { 
    return 100 
  } 
  static get CHEESEPRICE() { 
    return 10 
  } 
  static get SALADPRICE() { 
    return 20 
  } 
  static get POTATOPRICE() { 
    return 15 
  } 
  static get MAYONEZPRICE() { 
    return 20 
  } 
  static get SPICEPRICE() { 
    return 15 
  } 
 
  addStuffin() { 
    var stufPrise = 0; 
    if (this.stuffing == "cheese") { 
      stufPrise += Hamburger.CHEESEPRICE; 
    } 
    if (this.stuffing == 'salad') { 
      stufPrise += Hamburger.SALADPRICE; 
    } 
    if (this.stuffing == "potato") { 
      stufPrise += Hamburger.POTATOPRICE; 
    } 
    return stufPrise; 
  } 
  calculatePrice() { 
    if (this.size == "small") return Hamburger.SMALLPRICE + this.addStuffin(); 
    if (this.size == "large") return Hamburger.LARGEPRICE + this.addStuffin(); 
    else return null; 
  } 
} 
 
but.addEventListener('click', function() { 
  var burgerNew = new Hamburger(sizeBurger.value, stuffingStaf.value); 
  var stafNew = new Hamburger(sizeBurger.value, stuffingStaf.value); 
  result.innerHTML = "Buger cost " + burgerNew.calculatePrice() + '$'; 
  console.log(burgerNew.calculatePrice()) 
  console.log(stafNew.addStuffin()) 
})
<form name="burger"> 
  <fieldset> 
    <legend>Select size</legend> 
    <label> 
          <img src="images/small.jpg" alt=""/> 
          <input type="radio" name="sizeBurger" value="small"/> 
        </label> 
    <label> 
          <img src="images/large.jpg" alt=""/> 
          <input type="radio" name="sizeBurger" value="large"/> 
        </label> 
  </fieldset> 
  <fieldset> 
    <legend>Select stuffing</legend> 
    <label> 
          <img src="images/cheese.jpg" alt=""/> 
          <input type="radio" name="stuffingStaf" value="cheese"/> 
        </label> 
    <label> 
          <img src="images/salad.jpg" alt=""/> 
          <input type="radio" name="stuffingStaf" value="salad"/> 
        </label> 
    <label> 
          <img src="images/potato.jpg" alt=""/> 
          <input type="radio" name="stuffingStaf" value="potato"/> 
        </label> 
  </fieldset> 
  <fieldset> 
    <legend>Select topping</legend> 
    <label> 
          <img src="images/mayonez.jpg" alt=""/> 
          <input type="checkbox" name="mayonez" value="mayonez"/> 
          </label> 
    <label> 
          <img src="images/spice.jpg" alt=""/> 
          <input type="checkbox" name="spice" value="spice"/> 
          </label> 
  </fieldset> 
  <input type="button" class="button" value="ORDER" name="order" /> 
</form> 
<h3 id="result"></h3>

READ ALSO
Как добавить свой скрипт на сайт

Как добавить свой скрипт на сайт

Допустим при просмотре какого-то постороннего сайта, можно ли добавить свой js-скрипт и ajax-запрос к своему php-скрипту? те

167
Проблема с Flexbox

Проблема с Flexbox

В общем, justify-content:space-between не работает на всю ширину блокаВо всем шаблоне, где бы я не использовал его, будет тоже самое

203
Помогите сделать футер [требует правки]

Помогите сделать футер [требует правки]

СабжНужно сделать такую панель для футера

180