努力进行输入计算

时间:2017-03-14 05:43:25

标签: javascript input calculation

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

HTML:

$(this).parents("#test")

使用Javascript:

    <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>

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

2 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

首先,我注意到在JavaScript部分中引用了元素ID $jackrabbit_url = 'http://xxxxxxxxxx:8900/jackrabbit/server'; $user = 'xxxxxx'; $pass = 'xxxxxx'; $workspace = 'default'; $factory = new \Jackalope\RepositoryFactoryJackrabbit(); $repository = $factory->getRepository( array("jackalope.jackrabbit_uri" => $jackrabbit_url) ); $credentials = new \PHPCR\SimpleCredentials($user, $pass); $session = $repository->login($credentials, $workspace); $node = $session->getNode('/test'); $imageURL ='/var/www/sxnew/phpcr/web/uploads/FolderE/test.png'; $contents = base64_encode(file_get_contents($imageURL)); $image = $node->addNode("test.png"); $image->setProperty("jcr:content", "nt:resource"); $image->setProperty("jcr:data", $contents); $image->setProperty("jcr:mimeType", "image/png"); $session->save(); ,而这些元素在所显示的任何HTML标记中都不存在。

对于按钮,我个人会给我想要捕捉事件的元素提供一个类名或一个新的属性,如stundenlohn。一旦我给目标元素一个新属性(在这种情况下为<input type="text" data-event-target id="..." value="..." />),我会使用JS在每个属性上添加一个事件监听器。

data-enter-target