挣扎于输入计算

Question

您好，我是 javascript 的新手，正在努力让这段代码正常工作。因此，当我在用数字填充输入后单击按钮时，没有任何反应。你知道我在这里做错了什么吗？

HTML:

    <input type="text" id="eing1" placeholder=" z. B. 700&euro;" style="width:80px;">
    <input type="text" id="eing2" placeholder=" z. B. 30000&euro;" style="width:80px;">
    <input type="text" id="eing3" placeholder=" &empty; 225" style="width:80px;">
    <input id="button" type="button" value="Berechnen" onClick="ausgeben()">
   <p id="arbeitszeit"></p>
   <p id="produktivitaetssteigerung"></p>
   <p id="amortisationszeit"></p>

Javascript:

function ausgeben(){

    var kostentisch = parseInt(document.getElementById("eing1").value)
    var bruttogehalt = parseInt(document.getElementById("eing2").value)
    var arbeitstage = parseInt(document.getElementById("eing3").value)

    var stundenlohn = bruttogehalt/arbeitstage/8;
    var arbeitszeit = arbeitstage*8;
    var produktivitaetssteigerung = arbeitszeit*0.12;
    var amortisationszeit = kostentisch/(arbeitstage/(produktivitaetssteigerung*stundenlohn));

    document.getElementById("stundenlohn").innerHTML=tischsitzen + " Stunden";
    document.getElementById("produktivitaetssteigerung").innerHTML=armlehne + " Stunden";
    document.getElementById("amortisationszeit").innerHTML=stuhl + " Tage";
}

这里是js-fiddle：https://jsfiddle.net/1ej6ezou/

Answer 1

按如下方式绑定 keyUp 侦听器以获取更多信息，请在下面找到代码段

var selectors = document.querySelectorAll("#eing1, #eing2, #eing3");

for (var i = 0; i < selectors.length; i++) {
    selectors[i].addEventListener('keyup', function(event) {

      event.preventDefault();
     if (event.keyCode == 13) {
     document.getElementById("button").click();
   }
    });
}

<div id="ergonomierechner">
  <p id="h1" style="text-align: center; font-size: 150%; font-weight: bold; margin-top: 5px;">Individueller Ergonomie-Rechner</p>
  
  <center><p id="text" >
   <span>Kosten f&uuml;r Sitz-Stehschreibtisch: </span>
   <input type="text" id="eing1" placeholder=" z. B. 700&euro;" style="width:80px;">
   <span>Bruttogehalt inkl. 20% Lohnnebenkosten: </span>
   <input type="text" id="eing2" placeholder=" z. B. 30000&euro;" style="width:80px;">
   <span>J&auml;hrliche Arbeitstage: </span>
   <input type="text" id="eing3" placeholder=" &empty; 225" style="width:80px;">
   <input id="button" type="button" value="Berechnen" onClick="ausgeben();">
  </p></center>
  
  <div id="fehler"></div>
  
  <table style="width:100%">
    <tr>
   <th>Arbeitszeit:</th>
   <th>Produktivit&auml;tssteigerung pro Tag (12&#037;):</th>
   <th>Amortisationszeit:</th>
    </tr>
    <tr style="text-align: center;">
   <td><p id="arbeitszeit"></p></td>
   <td><p id="produktivitaetssteigerung"></p></td>
   <td><p id="amortisationszeit"></p></td>
    </tr>
  </table> 
 
 </div>
  
  <script>
  function ausgeben(){
  
  var kostentisch = parseInt(document.getElementById("eing1").value)
  var bruttogehalt = parseInt(document.getElementById("eing2").value)
  var arbeitstage = parseInt(document.getElementById("eing3").value)
  
  var stundenlohn = bruttogehalt/arbeitstage/8;
  var arbeitszeit = arbeitstage*8;
  var produktivitaetssteigerung = arbeitszeit*0.12;
  var amortisationszeit = kostentisch/(arbeitstage/(produktivitaetssteigerung*stundenlohn));

//Changes to be made here
  document.getElementById("arbeitszeit").innerHTML=arbeitszeit + " Stunden";
  document.getElementById("produktivitaetssteigerung").innerHTML=produktivitaetssteigerung + " Stunden";
  document.getElementById("amortisationszeit").innerHTML=amortisationszeit + " Tage";
 }
  </script>

Answer 2

首先，我注意到在 JavaScript 部分中，您引用的元素 ID stundenlohn 在显示的任何 HTML 标记中都不存在。

对于按钮，我个人会为我想从中捕获事件的元素指定一个 class 名称或一个新属性，如 <input type="text" data-event-target id="..." value="..." />。一旦我给目标元素一个新属性（在本例中为 data-enter-target），我将使用 JS 为每个元素添加一个事件侦听器。

<style>
   /* I put the style outside the element 
    * so if I need to change a value, the
    * changes will apply to all the elements 
    * that has this class.
    */

    * {color: black;}

    .w-80 {
        width: 80px;
    }
    
    p {text-transform: uppercase; font-weight: bold;}
    .color-0 {background-color: #0FA;}
    .color-1 {background-color: #FF0;}
    .color-2 {background-color: #F0F;}
    .color-3 {background-color: #0F0;}
    .color-4 {background-color: #00F;}
</style>
<div class="container">
    <!-- Here are the three input on which I added -->
    <!-- the "data-enter-target" attribute -->
    <input type="text" data-enter-target id="input-1" class="w-80" value="Value Here"  />
    <input type="text" data-enter-target id="input-2" class="w-80" value="Second value"  />
    <input type="text" data-enter-target id="input-3" class="w-80" value="Third value"  />

    <!-- Other elements like paragraphs -->
    <p></p>
    <p></p>
    <p></p>
    <p>Click several times</p>
    
    <!-- Add the submit button and add it an onclick function -->
    <input type="button" id="myButton" value="Submit" onclick="btnSubmit()"/>
</div>
<script>
    // Retrieve all the elements that contains the attribute
    // and store them in a variable as an array.
    var targets = document.querySelectorAll('input[data-enter-target]');
    
    // Then for each element
    targets.forEach(function(current_element, index) {
        // Add the event listener on the element
        current_element.addEventListener("keydown", function(event) {
            // Check if the key pressed is 'Enter'
            if(event.key == "Enter") { // You could also use the keycode (Enter=13)
                // Do the thing you wanna do when Enter is pressed
                // In this case we wanna trigger the onclick event of the submit button
                document.getElementById('myButton').click();
            }
        });
    });
    
    // Add the function called when the button is clicked
    function btnSubmit(event) {
        // Do whatever you want when the button is clicked
        alert('Hey!!! The button has been clicked!');

        // Ex: You could replace or add content to an existing element
        document.querySelectorAll('p').forEach(function(element) {
            element.innerHTML='<span class="color-'+parseInt(Math.random()*5)+'">Bob loves potatoes!</span>';
        });
    }
</script>

挣扎于输入计算

struggling with Input Calculation

javascript

input

calculation