Question 321140 in Html Question posted in
Some basic documentation can be found here.

Html – How to make labels appear in one row?

I want my labels to appear in one row the one that are in "form".
For now they are on under other. But at the same time I want the box where the result is showing to be under every label.

Also the title which is on green background I want it to be in the middle of the div "box".

And how to write the result in pop out window?

<div class="box">
    <div class="title">Kalkulator podatków</div>
    <div class="text">
        <h1>Pensja brutto</h1>
        <input type="number" id="liczba">
        <label for="stany"><h2>Wybierz województwo:</h2></label>
        <select name="stany" id="stany">
            <option value="" selected disabled>Wybierz województwo</option>
            <option value="Mazowieckie">Mazowieckie</option>
            <option value="Łódzkie">Łódzkie</option>
            <option value="Pomorskie">Pomorskie</option>
            <option value="Śląsk">Śląsk</option>
        </select>
    </div>
    <hr>
    <br><br>
    <p id="wynik"></p>
    <br><br>
    <form>
        <label for="wp">Wielkość podatku:</label>
        <input type="text" id="wp" disabled>
        <br><br>
        <label for="pn">Pensja netto:</label>
        <input type="text" id="pn" disabled>
    </form>
    <div class="button">
        <button id="oblicz" onclick="Count()">Oblicz</button>
        <button id="reset" onclick="Reset()">Reset</button>
    </div>
</div>

<script>
    function Count() {
        var bruttoInput = document.getElementById("liczba");
        var wojewodztwoSelect = document.getElementById("stany");
        var wpInput = document.getElementById("wp");
        var pnInput = document.getElementById("pn");
        var wynikParagraph = document.getElementById("wynik");

        var brutto = parseFloat(bruttoInput.value);
        var wojewodztwo = wojewodztwoSelect.value;

        var stawkiPodatkowe = {
            "Mazowieckie": 0.2,
            "Łódzkie": 0.18,
            "Pomorskie": 0.22,
            "Śląsk": 0.19
        };

        if (stawkiPodatkowe.hasOwnProperty(wojewodztwo)) {
            var stawkaPodatkowa = stawkiPodatkowe[wojewodztwo];
            var podatek = brutto * stawkaPodatkowa;
            var netto = brutto - podatek;

            wpInput.value = podatek.toFixed(2);
            pnInput.value = netto.toFixed(2);
            wynikParagraph.innerHTML = ""; 
        } else {
            wynikParagraph.innerHTML = "Nieprawidłowe województwo. Podatek nie może być obliczony.";
            wpInput.value = "";
            pnInput.value = "";
        }
    }
    
    function Reset() {
        document.getElementById("liczba").value ="";
        document.getElementById("stany").value = "";
        document.getElementById("w`your text`p").value ="";
        document.getElementById("pn").value ="";
    }
</script>
Tags:

6

Answers


  1. Chosen as BEST ANSWER
    0 
    <script>
    var random = Math.floor(Math.random() * 51);
    var proby = 10;
    var Wynik = document.getElementById("Wynik");
    var liczbain = document.getElementById("liczba");

    function Sprawdz() {

        if (proby > 0) {
            var liczba = +liczbain.value;

            if (!isNaN(liczba) && liczba < 51 && liczba > 0) {
                if (liczba === random) {
                    Wynik.innerHTML = "Brawo, zgadłeś! Wylosowana liczba to " + liczba;
                } else if (liczba > random) {
                    Wynik.innerHTML = "Za dużo!";
                    proby--;
                } else if (liczba < random) {
                    Wynik.innerHTML = "Za mało!";
                    proby--;
                }

                document.getElementById("proby").value = proby;
            } else {
                Wynik.innerHTML = "Podaj liczbę z zakresu 0-50";
            }
        } else {
            Sprawdz.disabled = true;
            Reset();
        }
    }

    function Reset() {
        document.getElementById("Wynik").innerHTML = "Przegrałeś! Wylosowana liczba to " + random;
    }
</script>

  2. 0
    1. Remove the <br>
    2. Wrap each label/input pair in a div
    3. Use CSS flexbox like so:

    I didn’t do anything about anything on a green background, as your code had nothing on a green background

    form {
  display: flex;
  gap: 1em;
}
form > div {
  display:flex;
  flex-direction: column;
}
    <form>
  <div>
  <label for="wp">Wielkość podatku:</label>
  <input type="text" id="wp" disabled>
  </div>
  <div>
  <label for="pn">Pensja netto:</label>
  <input type="text" id="pn" disabled>
  </div>
</form>
    Login or Signup to reply.
  3. 0 
    <div class="box">
    <div class="title">Zgadnij liczbę z zakresu 0-50</div>
    <div class="text">
        <h1>Pozostała ci ilość prób:</h1>
        <input type="number" id="proby" value="10">
        <br>
        <br>
        <h1>Podaj liczbę</h1>
        <input type="number" id="liczba">
        <div class="button">
            <button id="Sprawdz" onclick="Sprawdz()">Sprawdź!</button>
            <button id="Reset" onclick="Reset()">Poddaję się!</button>
        </div>
        <p id="Wynik"></p>
    </div>
</div>
    Login or Signup to reply.
  4. 0 
    <script>
    function Sprawdz() {
        var rok = document.getElementById("rok").value;
        var wynik = document.getElementById("wynik");

        if ( rok !== "" ) {
        if ((rok % 4 === 0 && rok % 100 !== 0 ) || rok % 400 === 0 )
        {
            wynik.innerHTML = rok + " jest rokiem przestępnym.";
        }
        else
        {
            wynik.innerHTML = rok + " nie jest rokiem przestępnym.";
        }
    }
    else 
        {
            wynik.innerHTML = "Proszę podać rok";
        }
    }


    function Reset() {
        document.getElementById("rok").value = "";
        document.getElementById("wynik").innerHTML = "";
    }
</script>
    Login or Signup to reply.
  5. 0 
    <div class="box">
    <div class="title"><h1>Czy ten rok jest przestępny?</h1></div>
    <div class="content">
        <div class="text">
        <h2>Informacja</h2>
        <h3>Rok przestępny jest, jeśli:</h3>
        <h4>1) jest podzielny przez 4 i nie jest podzielny przez 100</h4>
        <h4>2) lub jest podzielny przez 400</h4>
        </div>
        <label for="rok">Wpisz rok:  <input type="number" id="rok" placeholder="Wpisz rok"></label>
        <br>
        <br>
        <p id="wynik"></p>
        <br>
        <br>
        <button onclick="Sprawdz()">Sprawdź</button>
        <button onclick="Reset()">Resetuj</button>
        
    </div>
</div>
    Login or Signup to reply.
  6. 0 
      <script>
function obliczZiarna() {
  var numerPola = document.getElementById('pole').value;
  var wynikElement = document.getElementById('wynik');

  // Sprawdzenie poprawności numeru pola
  if (numerPola < 1 || numerPola > 64 || isNaN(numerPola)) {
    wynikElement.innerHTML = 'Pole musi mieć wartość pomiędzy 1 a 64.';
    return;
  }

  // Obliczenia ilości ziaren
  var iloscZiaren = Math.pow(2, numerPola - 1);

  // Wyświetlanie informacji o ilości ziaren
  wynikElement.innerHTML = 'Na polu ' + numerPola + ' jest ' + iloscZiaren 
  + ' ziarno.';
  wynikElement.innerHTML += '<br>Na całej szachownicy jest ' + (Math.pow(2, 
  numerPola) - 1) + ' ziaren.';
}
 </script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search