Button html not working


#1

please why the button is not working ?

<!DOCTYPE html>
<html>
<head>
	<title>Example</title>
	<script type="text/javascript" src="script.js"></script>
	    <link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>
<form>
	<table id="tbl1">
		<tr id="tblr1">
		<th>Item Name</th>
		<th>Qty</th>
		<th>Price</th>
		<th>Total</th> 
	</tr>
	<tr>
		<td> <input type="text" id="itmnme"></td>
		<td> <input type="number" id="qt"></td>
		<td> <input type="number" id="prc"></td>
		<td> <input type="number" id="ttl"></td>
	</tr>
	</table>
<button type="button" onclick="calc()">Try it</button>


</form>
</body>
</html>

JS Code

function calc()
{
var a = document.getelementbyid(“qt”).value;
var b = document.getelementbyid(“prc”).value;
var c = a * b;
document.getelementbyid(“ttl”).value= c ;
}


#2

Is there a lesson that goes with this? Please post a link to the exercise page. Thanks.


#3

im write the code

thanks


#4

Slightly less cryptic with the id values…

	<tr>
		<td> <input type="text" id="itemName"></td>
		<td> <input type="number" id="quantity"></td>
		<td> <input type="number" id="price"></td>
		<td> <input type="number" id="total"></td>
	</tr>

Let’s see what this code will do.

// js

// DOM objects
// static elements but their values are dynamic
// we only need to query and cache them at load time

const quantity = document.querySelector('#quantity');
const price = document.querySelector('#price');
const total = document.querySelector('#total');

const calc = () => {
    total.value = quantity.value * price.value;
};

#5

This is a working draft…

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="index.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <table>
		  <tr>
		    <th>Item Name</th>
		    <th>Qty</th>
		    <th>Price</th>
		    <th>Total</th> 
	    </tr>
      <tr>
		    <td> <input type="text" id="itemName"></td>
		    <td> <input type="number" id="quantity"></td>
		    <td> <input type="text" id="price"></td>
		    <td> <input type="text" id="total" readonly></td>
	    </tr>
    </table>
    <button type="button" onclick="calc()">Try it</button>
    <script src="index.js"></script>
  </body>
</html>

index.js

// DOM objects

const quantity = document.querySelector('#quantity');
const price = document.querySelector('#price');
const total = document.querySelector('#total');

// callback

const calc = () => {
    total.value = quantity.value * price.value;
};

https://repl.it/LsrB/1

The type number does not favor floats unless a step is included. the update field does not need a number type, since it is supposed to be read-only. Therefore I changed those two fields back to text.


#6

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.