Как упростить мои JS функции в калькуляторе питания? - PullRequest
Новая
       30

Как упростить мои JS функции в калькуляторе питания?

0 голосов
/ 03 февраля 2020

https://codepen.io/TBD007/pen/zYxgWbv

Попытка избежать написания функции для события нажатия каждой кнопки. В настоящее время я использую отдельную функцию для каждого клика. Я почти уверен, что есть способ объединить все это в одну функцию, но я просто не могу понять это самостоятельно. Есть идея упростить код js для вычисления значений? Помощь очень ценится! 

function test() {
  var summe = document.getElementById("txtResult").innerHTML;
  var x = document.getElementById("test").getAttribute("value");
  document.getElementById("txtResultItem").innerHTML = x;
}

function test2() {
  var summe = document.getElementById("txtResult").innerHTML;
  var x = document.getElementById("test2").getAttribute("value");
  document.getElementById("txtResultItem").innerHTML = x;
}

function test3() {
  var summe = document.getElementById("txtResult").innerHTML;
  var x = document.getElementById("test3").getAttribute("value");
  document.getElementById("txtResultItem").innerHTML = x;
}

Вот полный фрагмент: 

var result = document.getElementById("txtResult").innerHTML;

function test() {
  var summe = document.getElementById("txtResult").innerHTML;
  var x = document.getElementById("test").getAttribute("value");
  document.getElementById("txtResultItem").innerHTML = x;
}

function test2() {
  var summe = document.getElementById("txtResult").innerHTML;
  var x = document.getElementById("test2").getAttribute("value");
  document.getElementById("txtResultItem").innerHTML = x;
}

function test3() {
  var summe = document.getElementById("txtResult").innerHTML;
  var x = document.getElementById("test3").getAttribute("value");
  document.getElementById("txtResultItem").innerHTML = x;
}

function test4() {
  var summe = document.getElementById("txtResult").innerHTML;
  var x = document.getElementById("test4").getAttribute("value");
  document.getElementById("txtResultItem").innerHTML = x;
}

function test5() {
  var summe = document.getElementById("txtResult").innerHTML;
  var x = document.getElementById("test5").getAttribute("value");
  document.getElementById("txtResultItem").innerHTML = x;
}

function test6() {
  var summe = document.getElementById("txtResult").innerHTML;
  var x = document.getElementById("test6").getAttribute("value");
  document.getElementById("txtResultItem").innerHTML = x;
}

function test7() {
  var summe = document.getElementById("txtResult").innerHTML;
  var x = document.getElementById("test7").getAttribute("value");
  document.getElementById("txtResultItem").innerHTML = x;
}

function test8() {
  var summe = document.getElementById("txtResult").innerHTML;
  var x = document.getElementById("test8").getAttribute("value");
  document.getElementById("txtResultItem").innerHTML = x;
}

function test9() {
  var summe = document.getElementById("txtResult").innerHTML;
  var x = document.getElementById("test9").getAttribute("value");
  document.getElementById("txtResultItem").innerHTML = x;
}

function test10() {
  var summe = document.getElementById("txtResult").innerHTML;
  var x = document.getElementById("test10").getAttribute("value");
  document.getElementById("txtResultItem").innerHTML = x;
}

function test11() {
  var summe = document.getElementById("txtResult").innerHTML;
  var x = document.getElementById("test11").getAttribute("value");
  document.getElementById("txtResultItem").innerHTML = x;
}

function test12() {
  var summe = document.getElementById("txtResult").innerHTML;
  var x = document.getElementById("test12").getAttribute("value");
  document.getElementById("txtResultItem").innerHTML = x;
}

function test13() {
  var summe = document.getElementById("txtResult").innerHTML;
  var x = document.getElementById("test13").getAttribute("value");
  document.getElementById("txtResultItem").innerHTML = x;
}

function test14() {
  var summe = document.getElementById("txtResult").innerHTML;
  var x = document.getElementById("test14").getAttribute("value");
  document.getElementById("txtResultItem").innerHTML = x;
}

function add() {
  var y = document.getElementById("txtResultItem").innerHTML;
  var z = document.getElementById("txtResult").innerHTML;
  document.getElementById("txtResult").innerHTML = Number(y) + Number(z);
}

function sub() {
  var y = document.getElementById("txtResultItem").innerHTML;
  var z = document.getElementById("txtResult").innerHTML;
  document.getElementById("txtResult").innerHTML = Number(z) - Number(y);
}

function clearentry() {
  document.getElementById("txtResultItem").innerHTML = 0;
  document.getElementById("txtResult").innerHTML = 0;
}
.main {
  width: 100%;
  height: 100vh;
  background: linear-gradient(to right, rgba(26, 26, 43, 0.496), rgba(26, 26, 43, 0.86)), url("https://www.miss.at/wp-content/uploads/2019/11/Technik-Panne-McDonalds-muss-400.000-Euro-an-Gewinner-zahlen-1024x683.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
}

button {
  height: 60px;
  width: 60px;
  border: 2px solid silver;
  box-shadow: 2px 2px 5px black;
  position: relative;
}

#txtResult {
  width: 257px;
  height: 40px;
  text-align: right;
  background: rgba(40, 40, 53, 0.69);
  margin-bottom: 5px;
  box-shadow: inset -2px -2px 1px gray;
}

#txtResultItem {
  width: 257px;
  height: 40px;
  text-align: right;
  background: rgba(40, 40, 53, 0.69);
  margin-bottom: 5px;
  box-shadow: inset -2px -2px 1px gray;
}

button {
  height: 60px;
  width: 60px;
  background-size: contain;
}

#btnClearEntry {
  font-family: 'Raleway';
  max-height: 60px;
  max-width: 60px;
}

#btn1 {
  background-image: url("https://img.scoop.it/aImnklIQUA5uWH212vRoWjl72eJkfbmt4t8yenImKBVvK0kTmF0xjctABnaLJIm9");
}

#btn2 {
  background-image: url("https://www.mcdonalds.com/is/image/content/dam/ca/nfl/web/nutrition/products/nutrition/en/mcdonalds-big-mac.png?$Nutritional_Desktop$");
}

#btn3 {
  background-image: url("https://www.mcdonalds.com/is/image/content/dam/ca/nfl/web/nutrition/products/nutrition/en/mcdonalds-hamburger.png?$Nutritional_Desktop$");
}

#btn4 {
  background-image: url("https://www.mcdonalds.com/is/image/content/dam/ca/nfl/web/nutrition/products/nutrition/en/mcdonalds-6-chicken-mcnuggets.png?$Nutritional_Desktop$");
}

#btn5 {
  background-image: url("https://www.mcdonalds.com/is/image/content/dam/ca/nfl/web/nutrition/products/nutrition/en/mcdonalds-crispy-caesar-chicken-mcwrap.png?$Nutritional_Desktop$");
}

#btn6 {
  background-image: url("https://www.mcdonalds.com/is/image/content/dam/ca/nfl/web/nutrition/products/nutrition/en/mcdonalds-fries-medium.png?$Nutritional_Desktop$");
}

#btn7 {
  background-image: url("https://www.mcdonalds.com/is/image/content/dam/ca/nfl/web/nutrition/products/nutrition/en/mcdonalds-blueberry-muffin-hero.png?$Nutritional_Desktop$");
}

#btn8 {
  background-image: url("https://www.mcdonalds.com/is/image/content/dam/ca/nfl/web/nutrition/products/nutrition/en/mcdonalds-coca-cola.png?$Nutritional_Desktop$");
}

#btn9 {
  background-image: url("https://www.mcdonalds.com/is/image/content/dam/ca/nfl/web/nutrition/products/nutrition/en/mcdonalds-side-caesar-salad.png?$Nutritional_Desktop$");
}

#btn10 {
  background-image: url("https://www.mcdonalds.com/is/image/content/dam/ca/nfl/web/nutrition/products/nutrition/en/mcdonalds-egg-mcmuffin.png?$Nutritional_Desktop$");
}

#btn11 {
  background-image: url("https://www.mcdonalds.com/is/image/content/dam/ca/nfl/web/nutrition/products/nutrition/en/mcdonalds-filet-o-fish.png?$Nutritional_Desktop$");
}

#btn12 {
  background-image: url("https://www.mcdonalds.com/is/image/content/dam/ca/nfl/web/nutrition/products/nutrition/en/mcdonalds-quarter-pounder-cheese.png?$Nutritional_Desktop$");
}

#btn13 {
  background-image: url("https://www.mcdonalds.com/is/image/content/dam/ca/nfl/web/nutrition/products/nutrition/en/mcdonalds-baked-apple-pie.png?$Nutritional_Desktop$");
}

#btn14 {
  background-image: url("https://www.mcdonalds.com/is/image/content/dam/ca/nfl/web/nutrition/products/nutrition/en/mcdonalds-hot-fudge-sundae.png?$Nutritional_Desktop$")
}

#logo {
  background-image: url("http://www.mcdonalds.at/sites/default/files/cms/social_media/sharelogo.png");
  height: 60px;
  width: 60px;
  border: 0px solid rgba(40, 40, 53, 0.89);
  box-shadow: 2px 2px 9px black;
}

#btnClearEntry {
  background: rgba(40, 40, 53, 0.79);
  border: 1px solid white;
  color: white;
  width: 62px;
  height: 62px;
  box-shadow: 2px 2px 7px black;
}

#btnplus {
  color: white;
  background: red;
  border: 1px solid silver;
  font-size: 18px;
  width: 60px;
  height: 60px;
  box-shadow: 2px 2px 7px black;
}

#btnminus {
  color: white;
  background: rgba(255, 223, 15, 1);
  border: 1px solid silver;
  font-size: 30px;
  width: 60px;
  height: 60px;
  box-shadow: 2px 2px 7px black;
}

#logo {
  border: 1px solid white;
}

.calculator {
  box-shadow: 2px 2px 10 px rgba(0, 0, 0, 0.648);
  padding: 5px;
}

button:hover {
  position: relative;
}

button[aria-label]:hover:after {
  content: attr(aria-label);
  padding: 4px 8px;
  position: absolute;
  left: 0;
  top: 100%;
  white-space: nowrap;
  z-index: 20;
  background: red;
  color: yellow;
  font-family: 'Raleway';
}
<head>
  <link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <body>

    <div class="main">

      <div class="calculator">
        <table>
          <tr>
            <td colspan="4">
              <div style="color:white; font-family:sans-serif;font-size:20px;" id="txtResult" readonly="readonly"></div>
            </td>
          </tr>
          <tr>
            <td colspan="4">
              <div style="color:white; font-family:sans-serif;font-size:16px;" id="txtResultItem"></div>
            </td>
          </tr>
          <tr>
            <td id="test" value="475"><button onclick="test()" id="btn1" aria-label="Happy Meal"></button></td>
            <td id="test2" value="540">
              <button onclick="test2()" id="btn2" aria-label="Big Mac"></button>
            </td>
            <td><a href="https://www.mcdonalds.at/kalorienrechner" target="_blank"><button aria-label="All Products" id="logo" ></button></a></td>
            <td><button id="btnClearEntry" onclick="clearentry()">CE</button></td>
          </tr>

          <tr>
            <td id="test3" value="200"><button onclick="test3()" id="btn3" aria-label="Hamburger"></button></td>
            <td id="test4" value="250"><button onclick="test4()" id="btn4" aria-label="6 Chicken Nuggets"></button></td>
            <td id="test5" value="570"><button onclick="test5()" id="btn5" aria-label="Crispy Chicken Wrap"></button></td>
            <td><button id="btnplus" onclick="add()"><b>+</b></button></td>
          </tr>

          <tr>
            <td id="test6" value="350"><button onclick="test6()" id="btn6" aria-label="Big Fries"></button></td>
            <td id="test7" value="430"><button onclick="test7()" id="btn7" aria-label="Blueberry Muffin"></button></td>
            <td id="test8" value="190"><button onclick="test8()" id="btn8" aria-label="Coke"></button></td>
            <td><button id="btnminus" onclick="sub()"><b>-</b></button></td>
          </tr>

          <tr>
            <td id="test9" value="360"><button onclick="test9()" id="btn9" aria-label="Cesars salad"></button></td>
            <td id="test10" value="290"><button onclick="test10()" id="btn10" aria-label="Egg McMuffin"></button></td>
            <td id="test11" value="360"><button onclick="test11()" id="btn11" aria-label="Fish Mac"></button></td>
            <td id="test12" value="490"><button onclick="test12()" id="btn12" aria-label="Royal with Cheese"></button></td>
          </tr>

          <tr>
            <td></td>
            <td id="test13" value="270"><button onclick="test13()" id="btn13" aria-label="Baked Apple Pie"></button></td>
            <td id="test14" value="340"><button onclick="test14()" id="btn14" aria-label="Mc Sundae"></button></td>
            <td></td>
          </tr>

        </table>

      </div>
    </div>
  </body>

Ответы [ 10 ]

0 голосов
/ 04 февраля 2020

Спасибо всем большое !! Очень ценится!

0 голосов
/ 03 февраля 2020

Несколько указателей:

  • Наличие id на элементе может помочь вам однозначно идентифицировать, но оно становится огромным для отслеживания. Для этого используйте классы или составные селекторы.
  • Добавление onClick к разметке создаст угрозу безопасности, так как любой может проверить ваш элемент и увидеть, что происходит. Использование .addEventListener будет инкапсулировать код и поддерживать разметку в чистоте.
  • Наличие 1-1 сопоставления кнопки / обработчика является излишним. Вы можете добавить любую мета-информацию как часть тега data- и получить ее для обработки.

Ниже приведен обновленный код: https://codepen.io/TBD007/pen/zYxgWbv, который обращается к указателям выше.

Обратите внимание, я добавил атрибут data-number в HTML

0 голосов
/ 03 февраля 2020

Вот более короткая версия

Я использую следующие приемы

  • ненавязчивый обработчик событий
  • объект для хранения имен и значений
  • Манипулирование DOM (извините, я ленился на операторах)
  • удалил кнопку из ссылки и использовал вместо этого изображение для lo go

image 

.main {
  width: 100%;
  height: 100vh;
  background: linear-gradient(to right, rgba(26, 26, 43, 0.496), rgba(26, 26, 43, 0.86)), url("https://www.miss.at/wp-content/uploads/2019/11/Technik-Panne-McDonalds-muss-400.000-Euro-an-Gewinner-zahlen-1024x683.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
}

button {
  height: 60px;
  width: 60px;
  border: 2px solid silver;
  box-shadow: 2px 2px 5px black;
  position: relative;
}

#txtResult {
  width: 257px;
  height: 40px;
  text-align: right;
  background: rgba(40, 40, 53, 0.69);
  margin-bottom: 5px;
  box-shadow: inset -2px -2px 1px gray;
}

#txtResultItem {
  width: 257px;
  height: 40px;
  text-align: right;
  background: rgba(40, 40, 53, 0.69);
  margin-bottom: 5px;
  box-shadow: inset -2px -2px 1px gray;
}

button {
  height: 60px;
  width: 60px;
  background-size: contain;
}

#btnClearEntry {
  font-family: 'Raleway';
  max-height: 60px;
  max-width: 60px;
}

#btn1 {
  background-image: url("https://img.scoop.it/aImnklIQUA5uWH212vRoWjl72eJkfbmt4t8yenImKBVvK0kTmF0xjctABnaLJIm9");
}

#btn2 {
  background-image: url("https://www.mcdonalds.com/is/image/content/dam/ca/nfl/web/nutrition/products/nutrition/en/mcdonalds-big-mac.png?$Nutritional_Desktop$");
}

#btn3 {
  background-image: url("https://www.mcdonalds.com/is/image/content/dam/ca/nfl/web/nutrition/products/nutrition/en/mcdonalds-hamburger.png?$Nutritional_Desktop$");
}

#btn4 {
  background-image: url("https://www.mcdonalds.com/is/image/content/dam/ca/nfl/web/nutrition/products/nutrition/en/mcdonalds-6-chicken-mcnuggets.png?$Nutritional_Desktop$");
}

#btn5 {
  background-image: url("https://www.mcdonalds.com/is/image/content/dam/ca/nfl/web/nutrition/products/nutrition/en/mcdonalds-crispy-caesar-chicken-mcwrap.png?$Nutritional_Desktop$");
}

#btn6 {
  background-image: url("https://www.mcdonalds.com/is/image/content/dam/ca/nfl/web/nutrition/products/nutrition/en/mcdonalds-fries-medium.png?$Nutritional_Desktop$");
}

#btn7 {
  background-image: url("https://www.mcdonalds.com/is/image/content/dam/ca/nfl/web/nutrition/products/nutrition/en/mcdonalds-blueberry-muffin-hero.png?$Nutritional_Desktop$");
}

#btn8 {
  background-image: url("https://www.mcdonalds.com/is/image/content/dam/ca/nfl/web/nutrition/products/nutrition/en/mcdonalds-coca-cola.png?$Nutritional_Desktop$");
}

#btn9 {
  background-image: url("https://www.mcdonalds.com/is/image/content/dam/ca/nfl/web/nutrition/products/nutrition/en/mcdonalds-side-caesar-salad.png?$Nutritional_Desktop$");
}

#btn10 {
  background-image: url("https://www.mcdonalds.com/is/image/content/dam/ca/nfl/web/nutrition/products/nutrition/en/mcdonalds-egg-mcmuffin.png?$Nutritional_Desktop$");
}

#btn11 {
  background-image: url("https://www.mcdonalds.com/is/image/content/dam/ca/nfl/web/nutrition/products/nutrition/en/mcdonalds-filet-o-fish.png?$Nutritional_Desktop$");
}

#btn12 {
  background-image: url("https://www.mcdonalds.com/is/image/content/dam/ca/nfl/web/nutrition/products/nutrition/en/mcdonalds-quarter-pounder-cheese.png?$Nutritional_Desktop$");
}

#btn13 {
  background-image: url("https://www.mcdonalds.com/is/image/content/dam/ca/nfl/web/nutrition/products/nutrition/en/mcdonalds-baked-apple-pie.png?$Nutritional_Desktop$");
}

#btn14 {
  background-image: url("https://www.mcdonalds.com/is/image/content/dam/ca/nfl/web/nutrition/products/nutrition/en/mcdonalds-hot-fudge-sundae.png?$Nutritional_Desktop$")
}

#logo {
  height: 60px;
  width: 60px;
  border: 0px solid rgba(40, 40, 53, 0.89);
  box-shadow: 2px 2px 9px black;
}

#btnClearEntry {
  background: rgba(40, 40, 53, 0.79);
  border: 1px solid white;
  color: white;
  width: 62px;
  height: 62px;
  box-shadow: 2px 2px 7px black;
}

#btnplus {
  color: white;
  background: red;
  border: 1px solid silver;
  font-size: 18px;
  width: 60px;
  height: 60px;
  box-shadow: 2px 2px 7px black;
}

#btnminus {
  color: white;
  background: rgba(255, 223, 15, 1);
  border: 1px solid silver;
  font-size: 30px;
  width: 60px;
  height: 60px;
  box-shadow: 2px 2px 7px black;
}

#logo {
  border: 1px solid white;
}

.calculator {
  box-shadow: 2px 2px 10 px rgba(0, 0, 0, 0.648);
  padding: 5px;
}

button:hover {
  position: relative;
}

button[aria-label]:hover:after {
  content: attr(aria-label);
  padding: 4px 8px;
  position: absolute;
  left: 0;
  top: 100%;
  white-space: nowrap;
  z-index: 20;
  background: red;
  color: yellow;
  font-family: 'Raleway';
}
<head>
  <link rel="stylesheet" type="text/css" href="default.css">
  <link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">

  <script type="text/javascript" src="calc.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>

<body>

  <div class="main">

    <div class="calculator">
      <table>
        <tr>
          <td colspan="4">
            <div style="color:white; font-family:sans-serif;font-size:20px;" id="txtResult" readonly="readonly"></div>
          </td>
        </tr>
        <tr>
          <td colspan="4">
            <div style="color:white; font-family:sans-serif;font-size:16px;" id="txtResultItem"></div>
          </td>
        </tr>
        <tbody>

        </tbody>
      </table>
    </div>
  </div>
</body>
0 голосов
/ 03 февраля 2020

Вы можете использовать одну функцию, которая передает идентификатор элемента, который вы хотите использовать как var x.

Javascript

function test_reuse(elid){
var summe = document.getElementById("txtResult").innerHTML ;
var x=document.getElementById(elid).getAttribute("value");
document.getElementById("txtResultItem").innerHTML=x;

}

Образец HTML элемент 

<td id="test3" value="200"><button onclick="test_reuse('test3')" id="btn3" aria-label="Hamburger"></button></td>
0 голосов
/ 03 февраля 2020

Ваши кнопки могут вызывать событие при нажатии, а при наличии события вы можете получить идентификатор соответствующей кнопки и соответствующим образом обновить пользовательский интерфейс. 

<td id="test3" value="200"><button onclick="test_general(event)" id="btn3" aria-label="Hamburger"></button></td>


....

//JS

function test_general(event){
  var button_id = event.target.id
  // DO SOMETHING NOW THAT YOU HAVE THE ID OF BUTTON
  console.log(button_id)    
}
0 голосов
/ 03 февраля 2020

Вы можете использовать this ссылку в onclick обработчике событий (без передачи дополнительных аргументов, таких как test3 et c) 

function test(item){
    console.log(item.value)
}
<div><button value="1" onclick="test(this)">1</button></div>
<div><button value="2" onclick="test(this)">2</button></div>
<div><button value="3" onclick="test(this)">3</button></div>

Или вы можете использовать event.target: 

function test(){
    var item  = event.target;
    console.log(item.value)
}
<div><button value="1" onclick="test()">1</button></div>
<div><button value="2" onclick="test()">2</button></div>
<div><button value="3" onclick="test()">3</button></div>
0 голосов
/ 03 февраля 2020

Проверьте ниже фрагмент 

function test(){
    thisObj=event.target;
    var summe = document.getElementById("txtResult").innerHTML ;
    var x=thisObj.getAttribute("value");
    document.getElementById("txtResultItem").innerHTML=x;


}
<div id="txtResult"></div>
<input type="button" value="1" onclick="test()" />
<input type="button" value="2" onclick="test()" />
<input type="button" value="3" onclick="test()" />
<div id="txtResultItem"></div>
0 голосов
/ 03 февраля 2020

Попробуйте, добавьте аргумент для функции с цифрами 1,2,3..et c, передайте это значение и добавьте его в document.getElementById ("test" + itemValue) .getAttribute (" значение ") значение. Динамически передать входные данные из события щелчка. 

function test(itemValue){
    var summe = document.getElementById("txtResult").innerHTML ;
    var x=document.getElementById("test"+itemValue).getAttribute("value");
    document.getElementById("txtResultItem").innerHTML=x;
}
0 голосов
/ 03 февраля 2020

Таким образом, единственной переменной среди ваших функций является идентификатор элемента, из которого вы получаете x, вы можете написать функцию, которая принимает эту переменную в качестве параметра, и передавать ее функции при вызове

* 1003. * 
<button onclick="test('test')">
0 голосов
/ 03 февраля 2020

Вы можете заменить все эти функции на это; 

function test(elementId){
    var summe = document.getElementById("txtResult").innerHTML ;
    var x = document.getElementById(elementId).getAttribute("value");
    document.getElementById("txtResultItem").innerHTML = x;
}

и затем в ваших обработчиках onClick выполните что-то вроде

  • test ('test')
  • test ('test2' )
  • test ('test3')

и просто передайте id элемента в виде строкового значения функции.

...