CODEWITHSUNDEEP
javascript
Wardy
Wardy

Reputation: 43

Convert °C to °F

I'm a beginner in Javascript and I'd like to convert °C to °F so I did this program but it doesn't work.

function convertisseur() {
  var celsius = parseInt(document.getElementById("celsius").value);
  var fara = celsius * 1.8 + 32.0;
  document.getElementById("text").innerHTML = celsius;
  document.getElementById("text2").innerHTML = fara;
}
<form action="" class="formulaire">
      <input type="text" placeholder="Température en °C" id="celsius">
      <input type="submit" value="Valider" onclick="convertisseur()">
</form>

<p><span id="text"></span>°C équivaut à <span class="text2"></span>°F</p>

Upvotes: 0

Views: 161

Answers (3)

rmccreary
rmccreary

Reputation: 76

When you say "it doesn't work", it can be hard to tell what you mean. Try to be descriptive about the problem. Is anything showing when you load the HTML into a browser? What's the expected behavior, and what is happening instead? What have you tried in order to fix the problem?

From what I see here, I'll suggest that you should make sure you've included your JavaScript into your HTML correctly, either by

a) placing it between tags like so: <script>Your code here.</script>

or

b) including the script file in a src attribute like so: <script src="script.js"></script>

Otherwise, look over your HTML again and make sure all your opening tags that need a closing tag have one in the right place. And make sure you don't have any closing tags without an opening tag.

Upvotes: 0

Saurabh Yadav
Saurabh Yadav

Reputation: 3386

I have update it check it 'text2' is class not an id so use document.getElementsByClassName to access it

 <form action="" class="formulaire">
    <input type="text" placeholder="Température en °C" id="celsius">
    <input type="button" value="Valider" onclick="convertisseur()">
 </form>

 function convertisseur() {
    var celsius = parseInt(document.getElementById("celsius").value);
    var fara = celsius * 1.8 + 32.0;
    document.getElementById("text").innerHTML = celsius;
    document.getElementsByClassName('text2')[0].innerHTML  = fara;
 }

Upvotes: 0

Ele
Ele

Reputation: 33726

Three things:

  1. You need to prevent the default behavior of the button to avoid form submission.
  2. You need to modify the span with class text2 because you actually want to add an id.
  3. You need to pass the implicit object event as follow: onclick="convertisseur(event)"

function convertisseur(e) {
  e.preventDefault();
  var celsius = parseInt(document.getElementById("celsius").value);
  var fara = celsius * 1.8 + 32.0;
  document.getElementById("text").innerHTML = celsius;
  document.getElementById("text2").innerHTML = fara;
}
<form action="" class="formulaire">
  <input type="text" placeholder="Température en °C" id="celsius">
  <input type="submit" value="Valider" onclick="convertisseur(event)">
</form>
</div>

<p><span id="text"></span>°C équivaut à <span id="text2"></span>°F</p>

I recommend you to embrace the function addEventListener

document.getElementById('button').addEventListener('click', convertisseur);

function convertisseur(e) {
  e.preventDefault();
  var celsius = Number(document.getElementById("celsius").value);
  var fara = celsius * 1.8 + 32.0;
  document.getElementById("text").innerHTML = celsius;
  document.getElementById("text2").innerHTML = fara;
}
<form action="" class="formulaire">
  <input type="text" placeholder="Température en °C" id="celsius">
  <input id='button' type="submit" value="Valider">
</form>

<p><span id="text"></span>°C équivaut à <span id="text2"></span>°F</p>

Upvotes: 6

Related Questions