Я хочу получить общую сумму из 3 предметов в зависимости от их цены и количества. - PullRequest
Новая
       1

Я хочу получить общую сумму из 3 предметов в зависимости от их цены и количества.

0 голосов
/ 08 марта 2019

Я хочу получить общую сумму, отображаемую в нижней части моего документа, из 3 предметов в зависимости от их цены и количества.Например, пункт 1 стоит 5 долларов, пункт 2 - 7 долларов, пункт 3 - 11 долларов.Мне нужны функция и редактирование моих html-тегов ввода, чтобы я мог отображать полную сумму, если я хочу выбрать разные количества для каждой позиции.

Это то, что у меня есть до сих пор:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="style.css">
    <script src="app.js"></script>
</head>
<body>
    <h1>Marios Pest Control</h1>
    <form>
    <ul class="myList">
            <img src="Blue_Goomba_SMWU.png" class="imgCenter">
        <li>Goombas: 5 Coins (ea.)<l1> <br>
        Total Number:
                <input id="goombasInp" type="number" name="Total Number Of">
            <button>add</button>
        <br> <br> <br> <br> <br> <br> <br> <br> <br>
            <img src="635-6354796_mkdd-bob-omb-bomba-de-tiempo-virus.png">
        <li>Bob-ombs: 7 Coins (ea.)<li>  
        Total Number:
                <input id="bob-ombsInp" type="number" name="Total Number Of">
            <button>add</button>
        <br> <br> <br> <br> <br> <br> <br> <br> <br>
            <img src="1200px-DeepCheepNSLU.png">
        <li>Cheep-cheeps: 11 Coins (ea.)</li> 
        Total Number:
            <input id="cheep-cheepsInp" type="number" name="Total Number Of">
        <button>add</button>
        <br> <br> <br> <br> <br> <br> <br> <br> <br>
      </ul> 
      <p id="myP">Click Submit To Get The Total:</p>
      <button id="wrapper" onclick="myFunction()">Add Total</button>
    </form>
    <footer class="myFooter">
        <p>Marios Pest Control</p> 2410 Birch Ave Lubbock, Tx 79404 <p>url: <a href="mariospestconrol.com">mariospestconrol.com </a> <p>email: <a href="mailto:someone@example.com">someone@example.com</a>.</p>
      </footer>

</body>
</html>

1 Ответ

0 голосов
/ 08 марта 2019

Вы можете использовать этот вариант myFunction (), чтобы выполнить свою задачу: 

function myFunction(event) {
  event.preventDefault();
  let goombas = document.getElementById("goombasInp");
  let bobombs = document.getElementById("bob-ombsInp");
  let cheeps = document.getElementById("cheep-cheepsInp");

  goombas = goombas.value * 5;
  bobombs = bobombs.value * 7;
  cheeps = cheeps.value * 11;

  document.getElementById("myP").innerHTML += goombas+bobombs+cheeps;
}

document.querySelector("button#wrapper").addEventListener('click', myFunction);

Я рекомендую / предложу вам удалить: onclick = "myFunction ()" с вашей кнопки и переместить тег сценария в конец файла, прямо перед тем, как закрыть

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...