Question

Question #47635

I am quite lost on this one:
<!DOCTYPE html>
<html>
<head>
<title>Temperature Converter</title>
<script type="text/javascript" src="Week7.js"></script>
</head>
<body>
<p>Enter a Temperature to Convert in the field below and select the starting scale.</p>
<input type="text" name="txtTemp" id="txtTemp" placeholder="Enter a Temperature" />
<br />
<br />
<input type="radio" id="radFahrenheit" name="radTemp" checked/>Fahrenheit to Celcius

<input type="radio" id="radCelcius" name="radTemp"/>Celcius to Fahrenheit

<button onclick="ConvertTemp();">Convert</button>

<div id="divResults"></div>
</body>
</html>

and what I've gotten so far:

function ConvertTemp(){
var radF = document.getElementById('radFahrenheit');
var radC = document.getElementById('radCelcius');

if(radF.checked){

FahrenheitToCelcius();
}else if(radC.checked){

CelciustoFahrenheit();
}
}

Any tips? thanks in advance.

Expert's answer

Answer on Question #47635, Programming, AJAX | JavaScript | HTML | PHP

Problem.

<!DOCTYPE html>
<html>
<head>
<title>Temperature Converter</title>
</head>
<body>
<p>Enter a Temperature to Convert in the field below and select the starting scale.</p>
<input name="txtTemp" type="text" id="txtTemp" placeholder="Enter a Temperature"/>
<br/>
<br/>
<input id="radFahrenheit" name="radTemp" type="radio" checked="checked"/>Fahrenheit to Celcius
<br/>
<br/>
<input name="radTemp" type="radio" id="radCelcius" name="radTemp"/>Celcius to Fahrenheit
<br/>
<br/>
<div id="divResults"></div>
<br/>
<br/>
<button onclick="ConvertTemp();">Convert</button>
<script src="Week7.js" type="text/javascript"></script>
</body>
</html>

Solution.

It is better to include javascript code at the end of the body to ensure that the DOM is loaded.

Code (Week7.js)

function ConvertTemp() {
    var fahrenheit = document.getElementById('radFahrenheit').checked;
    var temperature = document.getElementById('txtTemp').value;
    var outputDIV = document.getElementById('divResults');
    if (fahrenheit) {
        outputDIV.innerHTML = (5/9) * (temperature - 32);
    } else {
        outputDIV.innerHTML = temperature * (9/5) + 32;
    }
}

Code (Question #47585.)

<!DOCTYPE html>
<html>
<head>
<title>Temperature Converter</title>
</head>
<body>
<p>Enter a Temperature to Convert in the field below and select the starting scale.</p>
<input name="txtTemp" type="text" id="txtTemp" placeholder="Enter a Temperature"/>
<br/>
<br/>
<input id="radFahrenheit" name="radTemp" type="radio" checked="checked"/>Fahrenheit to Celcius
<br/>
<br/>
<input name="radTemp" type="radio" id="radCelcius" value="0" type="radio"/>Celcius to Fahrenheit
<br/>
<br/>
<div id="divResults"></div>
<br/>
<br/>
<button onclick="ConvertTemp();">Convert</button>
<script src="Week7.js" type="text/javascript"></script>
</body>
</html>

Result

Enter a Temperature to Convert in the field below and select the starting scale.

27

- ☐ Fahrenheit to Celcius

- ☀ Celcius to Fahrenheit

$0.6

Convert

http://www.AssignmentExpert.com/

Learn more about our help with Assignments: HTML Javascript PHP AJAX

Comments

No comments. Be the first!