<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="JavaScript" type="text/javascript" src="js.js"></script>

</head>

<body>
<h2>Calculate the area</h2>

Choose shape
<form>
	<input type="radio" name="hinh" value="hcn" onclick="area(this.value)" />Rectangle
	<input type="radio" name="hinh" value="htron" onclick="area(this.value)"/>Circle
</form>
<div id="property"></div>

</body>
</html>
// JavaScript Document
function area(value)
{
	var prop = document.getElementById('property');
	var content="";
	if(value=='hcn')
	{
		
		content +="chieu dai:" + "<input type='text' name='width' />";
		content +="chieu rong:" + "<input type='text' name='height' />" +"<br/>";
		var inputWidth = document.forms[1].width.value;
		document.write(inputWidth);
		var w = parseFloat(inputWidth);
		var inputHeight = document.forms[0].height.value;
		var h = parseFloat(inputHeight); 
		content +="<input type='button' name='dtich1' value='Tinh dien tich' onclick=\"alert(w*h)\"/>";
		
	}
	prop.innerHTML = content;
	
}

Here is my code using innerHTML to calculate the area of 2 shapes, but it does not work properly.
I cannot get the value from the users' input

Recommended Answers

All 3 Replies

There are some errors...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="JavaScript" type="text/javascript" src="js.js"></script>

</head>

<body>
<h2>Calculate the area</h2>

Choose shape
<form>
	<input type="radio" name="hinh" value="hcn" onclick="area(this.value)" />Rectangle
	<input type="radio" name="hinh" value="htron" onclick="area(this.value)"/>Circle
</form>
<div id="property"></div>

</body>
</html>
// JavaScript Document
function area(value)
{
	var prop = document.getElementById('property');
	var content="";
	if(value=='hcn')
	{
		
		content +="chieu dai:" + "<input type='text' name='width' \/>";
		content +="chieu rong:" + "<input type='text' name='height' \/>" +"<br\/>";
		var inputWidth = document.forms[1].width.value;
		document.write(inputWidth);
		var w = parseFloat(inputWidth);
		var inputHeight = document.forms[0].height.value;
		var h = parseFloat(inputHeight); 
		content +="<input type='button' name='dtich1' value='Tinh dien tich' onclick='alert(w*h)'\/>";
		
	}
	prop.innerHTML = content;
	
}

Here is my code using innerHTML to calculate the area of 2 shapes, but it does not work properly.
I cannot get the value from the users' input

Now, you should try your modified code [!quoted here].

Thanks for sharing

Well, did you actually try the modified code?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.