Jak wyświetlić liczbę jako potęgę w JavaScript

Question

Dopiero uczę się Javascript proszę o wyrozumiałość.

Jak w JavaScript w wyniku obliczania potęgi wyświetlić 2 do potęgi 2 tzn. tak jak poniżej na obrazku.

Obecnie wyświetla mi jak niżej.

HTML

<form id="oblicz" action="" method="post">
        <div>
            Bok A<input type="number" id="a">
            <span id="pk">= </span><br><br>
            <input type="button" value="Oblicz" onclick="oblicz()">
        </div>
    </form>

JS

function oblicz() {
    const a = document.getElementById('a').value;
    const pk = parseInt(a) * parseInt(a); // dodawanie
    document.getElementById('pk').innerHTML = +a + ' * ' + a + ' = ' + a + '^2 = ' + pk;
    return false;
}

 

Answer 1

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_sup

Comments

Ja wiem że w HTML jest coś takiego jak <sup>. W HTML jak wstawię sup po = to wyświetla się jak niżej  np wynik do potęgi 2 zamiast wynik. Nie wiem jak dodać ten sup do JavaScript.

HTML

<form id="oblicz" action="" method="post">
        <div>
            Bok A<input type="number" id="a">
            <span id="pk">= </span>
            <span id="s"><sup>2</sup></span><br><br>
            <input type="button" value="Oblicz" onclick="oblicz()">
        </div>
    </form>

 

JS

function oblicz() {
    const a = document.getElementById('a').value;
    const pk = parseInt(a) * parseInt(a); // dodawanie
    document.getElementById('pk').innerHTML = +a + ' * ' + a + ' = ' + a + ' = ' + pk;
    return false;
}

 

---

https://stackoverflow.com/questions/16073093/innerhtml-adds-text-but-not-html-tags

W innerHTML możesz wstawić tagi htmlowe.

---

Ale, że jak 

---

<script>

function oblicz() {
    const a = document.getElementById('a').value;
    const pk = parseInt(a) * parseInt(a); // dodawanie
    document.getElementById('pk').innerHTML = +a + ' * ' + a + ' = ' + a +"<sup>" + 2 + " </sup> "+' = ' + pk;
    return false;
}

</script>

<form id="oblicz" action="" method="post">
        <div>
            Bok A<input type="number" id="a">
            <span id="pk">= </span>

            <input type="button" value="Oblicz" onclick="oblicz()">
        </div>
</form>

Nigdy nie pisałem w JS, ale działa. Serio, to taki problem przetestować kilka rozwiązań?

---

@tkz Przetestowałam kilka rozwiązań ale nic nie działało. Nie wpadłam na ten pomysł pewnie dlatego że już jestem bardzo zmęczona bo wykładowca na zaliczenie dał nam bardzo dużo zadań chaotycznie napisanych.

Działa dzięki

---

VBSerwice Oj zapomniałam usunąć bo to kod z innego zadania. To przez zmęczenie.

---

Czy czasem nie o to Tobie chodzi:  

<form id="oblicz" action="" method="post">
  <div>
    Bok A<input type="number" id="a">
    <span id="pk">= <sup>2</sup></span><br><br>
    <input type="button" value="Oblicz" onclick="oblicz()">
  </div>
</form>

function oblicz() {
  const a = document.getElementById('a').value;
  document.getElementById('pk').innerHTML = `${a} * ${a} = ${a*a} = ${a}<sup>2</sup>`;
  return false;
}

---

Nie

---

A tak

function oblicz() {
  const a = document.getElementById('a').value;
  document.getElementById('pk').innerHTML = `${a} * ${a} = ${a}<sup>2</sup> = ${a*a}`;
  return false;
}