146 Uncaught ReferenceError: temperature is not defined at HTMLButtonElement.cityOptions

Question

I am a new one here and currently learning Java. Have faced an issue while building a simple page where h1 should be updated depending on the result in let temperature = prompt("What temperature is it?");

Although when I try to add temperature here

let city = prompt("What city do you live in?");
        if (currentTemperature()) {
          updateHeading(`Currently ${temperature} in ${city}`);

In console it says html:146 Uncaught ReferenceError: temperature is not defined at HTMLButtonElement.cityOptions

How can I fix that?

Here is the full code

<script>
      function updateHeading(newHeading) {
        let heading = document.querySelector("h1");
        heading.innerHTML = newHeading;
      }

      function currentTemperature() {
        let temperature = prompt("What temperature is it?");
        return temperature >= 0;
      }

      function cityOptions() {
        let city = prompt("What city do you live in?");
        if (currentTemperature()) {
          updateHeading(`Currently ${temperature} in ${city}`);
        } else {
          updateHeading(`Currently ${temperature} in ${city}`);
        }
      }

      let changeCityButton = document.querySelector("button");
      changeCityButton.addEventListener("click", cityOptions);
    </script>

_"...and currently learning Java."_ - [JavaScript is not Java](http://javascriptisnotjava.com) — Andreas, Aug 14 '22 at 13:43
Why do you compare (a string) with `>= 0;` and return the result of that expression when you want the temperature? — Andreas, Aug 14 '22 at 13:45
Why is there an `if ... else ...` in `cityOptions()` when both branches do the exact same thing? — Andreas, Aug 14 '22 at 13:45
Welcome to Stack Overflow! Please visit [help], take [tour] to see what and [ask]. Do some research, search for related topics on SO; if you get stuck, post a [mcve] of your attempt, noting input and expected output, preferably in a [Stacksnippet](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/) — mplungjan, Aug 14 '22 at 13:49

score 0 · Answer 1 · answered Aug 14 '22 at 13:58

Your let temperature is only visible inside the function it is in.

I think you meant to test the temperature entered is a number:

How can I check if a string is a valid number?

const isNumeric = str => /^-?\d+$/.test(str);

function updateHeading(newHeading) {
  let heading = document.querySelector("h1");
  heading.innerHTML = newHeading;
}

function currentTemperature() {
  let temperature = prompt("What temperature is it?");
  return isNumeric(temperature) ? temperature : null; // only return the temperature if a number
}

function cityOptions() {
  let city = prompt("What city do you live in?");
  let temperature = currentTemperature()
  if (city && temperature !== null) {
    updateHeading(`Currently ${temperature}C in ${city}`);
  }
}

let changeCityButton = document.querySelector("button");
changeCityButton.addEventListener("click", cityOptions);

<h1></h1>
<button type="button">Click</button>

146 Uncaught ReferenceError: temperature is not defined at HTMLButtonElement.cityOptions

1 Answers1