0

I'm a complete beginner with coding and I need to write a simple program with javascript and html for an exam, but I need to stick to my professor' standard (hence the specific way this code looks).

I tried to make a simple temperature converter (celsius to fahrenheit) but I don't understand why nothing happens when I click the "convert" button.

EDIT: for some reason the converter works fine here, but when I open it in a new window it doesn't work at all. Any idea why that might be?

function writeText (node, message) {
    var nodeText = document.createTextNode(message);
    node.replaceChild(nodeText, node.firstChild);
}
function convertHandler () {
    try {
        if (nodeTemperature.value =="") {
            writeText("the field is empty");
            return;
        }
        var temperature = Number(nodeTemperature.value);
        if (isNaN(temperature)) {
            writeText(nodeTemperature.value + " is not a number");
            return;
        }
        nodeResult.value = temperature * (9/5) + 32;

    } catch ( e ) {
        alert("convertHandler" + e);
    }
}
var nodeTemperature;
var nodeConvert;
var nodeResult;
var ConvertMessage;
function loadHandler () {
    try {
        nodeTemperature = document.getElementById("temperature");
        nodeConvert = document.getElementById("convert");
        nodeResult = document.getElementById("result");
        nodeConvertMessage = document.getElementById("convertMessage");
        nodeTemperature.value = "";
        nodeResult.value = "";
        nodeConvert.onclick = convertHandler;
        var nodeText = document.createTextNode("");
        nodeConvertMessage.appendChild(nodeText);
    } catch ( e ) {
        alert("loadHandler" + e);
    }
}
window.onload = loadHandler;
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script scr="p3.js"></script>
        <title>Temperature converter</title>
    </head>
    <body>
        <h1>Convert Celsius in Fahrenheit</h1>
        <input type="text"
        id="temperature"/> Celsius
        <br>
        <input type ="button"
        id="convert"
        value="Convert"/>
        <span id="convertMessage"></span>
        <br>
        <input type="text"
        id="result"
        readonly="readonly"/>Fahrenheit
    </body>
</html>

If someone could help me that would save my (academic) life, thank you.

sprout
  • 1
  • 2
  • One thing that jumps out is that your calls to `writeText` are only providing a single argument (a string), but your `writeText` function expects two parameters (an element and a string). As a result, you're trying to call `replaceValue` on a string. Strings don't have a `replaceValue` function, so that fails -- you can see that error in the devtools console by pressing F12. So that's the first thing to fix. – T.J. Crowder Dec 04 '21 at 15:44
  • 1
    But I should note that if I type in (say) 0 in the Celsius box above and click Convert, I **do** see `32` in the Farhrenheit box. (Since in that case, nothing tries to call `writeText`.) – T.J. Crowder Dec 04 '21 at 15:45
  • Side note: You can change the text of a text node by writing to its `nodeValue` property, you don't have to create a new text node and replace the previous one. If the element *only* has text in it, you can avoid dealing with the text node directly at all by using the `textContent` property of the element instead. – T.J. Crowder Dec 04 '21 at 15:47
  • 2
    I made a few tries and it works. What's the exact problem? – Redu Dec 04 '21 at 15:50
  • @T.J.Crowder Thank you for your answer. That's so weird though! It works for me too on here, but if I try to open it on firefox or chrome the convert button does nothing. Any idea what that might be? – sprout Dec 04 '21 at 16:08
  • @Redu yeah I just noticed it actually works on here, but when I try opening it in a new window it doesn't. Any clues why? – sprout Dec 04 '21 at 16:09
  • The problem is that you have your `script` tag in the wrong place (or at least need `defer` on it), see [my answer here](https://stackoverflow.com/questions/2920129/can-i-run-javascript-before-the-whole-page-is-loaded/2920207#2920207). – T.J. Crowder Dec 04 '21 at 16:11
  • 1
    @T.J.Crowder thank you so much! – sprout Dec 04 '21 at 16:31

0 Answers0