• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Problem z przypisywaniem wartości height do div

VPS Starter Arubacloud
0 głosów
253 wizyt
pytanie zadane 8 czerwca 2022 w JavaScript przez MisticVoid Początkujący (490 p.)

Dobry wieczór, mam problem z dodaniem wysokości pobranej z pola input number, zadaniem tego skryptu jest dodanie słupka do diva results o podanej przez użytkownika wartości. Proszę o pomoc. Oto cały kod: 

$("#Add").click(function(){
    var wysokosc = document.getElementById("#value1");
    $("#result").append("<div></div>")
    $("div:not(.result, .container, .panel)").attr("id", "value")
    $("#value").css("width", "20px")
    $("#value").css("background-color", "black")
    $("#value").css("height", wysokosc)
    $("#value").css("position", "absolute")
    $("#value").css("top", "96.5%")
    $("#value").css("left", "5%")
})
*{
    font-family: Georgia;
}

body{
    background-color: black;
    margin-left: 20%;
    margin-right: 20%;
    width: 60%;
    height: 1000px;
}

.container{
    background-color: white;
    align-items: center;
    height: 100%;
}

.result{
    margin: 2%;
    height: 70%;
    border-style: groove;
    border-radius: 15px;
    border-color: black;
    position: relative;
}

.panel{
    margin-left: 40%;
    margin-right: 2%;
    padding: 5%;
    height: 10%;
    border-style: groove;
    border-radius: 15px;
    border-color: black;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="WykresSłupkowy.css">
    
    <title>Wykres</title>
</head>
<body>
    <div class="container">
        <div class="result" id="result">
            
        </div>
        
        <div class="panel">
            <input type="number" placeholder="Wartosc 1" id="value1">
            <input type="number" placeholder="Wartosc 2" id="value2">
            <input type="number" placeholder="Wartosc 3" id="value3">
            <br></br>
            <input type="button" value="Dodaj" id="Add">
            <input type="button" value="Czysc" id="Clean">
        </div>
    </div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script type="text/javascript" src="WykresSłupkowy.js"></script>
</html>

Bardzo dziękuję za pomoc smiley

3 odpowiedzi

+2 głosów
odpowiedź 8 czerwca 2022 przez VBService Ekspert (251,210 p.)
edycja 9 czerwca 2022 przez VBService

Samo zapisanie

var wysokosc = $("#value1").val();

czy

var wysokosc = document.getElementById("value1").value;

aby ustawić height nie wystarczy, musisz dodać wartość, czy to w pikselach, em-ach, procentach itp.

$(".result div#r_value1").css("height", wysokosc1 + "%");

 

propozycja zmian

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="WykresSłupkowy.css">

    <title>Wykres</title>
  </head>
  <body>
    <div class="container">
      <div class="result"></div>

      <div class="panel">
        <input type="number" placeholder="Wartosc 1" id="value1" min="0">
        <input type="number" placeholder="Wartosc 2" id="value2" min="0">
        <input type="number" placeholder="Wartosc 3" id="value3" min="0">

        <input type="button" value="Dodaj" id="add">
        <input type="button" value="Czysc" id="clean">
      </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script type="text/javascript" src="WykresSłupkowy.js"></script>
  </body>
</html>
* {
  font-family: Georgia;
}

body {
  background-color: black;
  margin-left: 20%;
  margin-right: 20%;
  width: 60%;
  height: 1000px;
}

.container {
  background-color: white;
  align-items: center;
  height: 100%;
}

.result {
  margin: 2%;
  height: 70%;
  border-style: groove;
  border-radius: 15px;
  border-color: black;
  position: relative;
}

.panel {
  margin-left: 40%;
  margin-right: 2%;
  padding: 5%;
  height: 10%;
  border-style: groove;
  border-radius: 15px;
  border-color: black;
}

.panel input[type="number"] {
  display: block;
  margin-bottom: 0.5em;
}

.result [id^="r_value"] {
  position: absolute;
  width: 20px;
  bottom: 1em;
  transition: height 1s cubic-bezier(0.5,-0.5,0.25,1.4);
}
.result div:nth-child(1) {
  left: 5%;
  background-color: black;
  background-image: linear-gradient(to top, black, gray, silver);
}
.result div:nth-child(2) {
  left: 10%;
  background-color: yellow;
  background-image: linear-gradient(to top, gold, yellow, lightyellow);
}
.result div:nth-child(3) {
  left: 15%;
  background-color: red;
  background-image: linear-gradient(to top, darkred, red, peachpuff);
}
$("#add").click(function() {
  var wysokosc1 = $(".panel #value1").val() || 0,
      wysokosc2 = $(".panel #value2").val() || 0,
      wysokosc3 = $(".panel #value3").val() || 0;
 
  if ($(".result div").length == 0) {
    $(".result").append('<div id="r_value1"></div>');
    $(".result").append('<div id="r_value2"></div>');
    $(".result").append('<div id="r_value3"></div>');
 
    $(".result #r_value1").css("height", wysokosc1 + "%");
    $(".result #r_value2").css("height", wysokosc2 + "%");
    $(".result #r_value3").css("height", wysokosc3 + "%");
  } else {
    $(".result #r_value1").css("height", wysokosc1 + "%");
    $(".result #r_value2").css("height", wysokosc2 + "%");
    $(".result #r_value3").css("height", wysokosc3 + "%");
  }
})

 

nie bardzo rozumiem co chciałeś osiągnąć tym wpisem top

$(...).css("top", "96.5%");

proponuję zamianę na bottom np.

$(...).css("bottom", "1em");

 


[ EDIT ] 

Dodanie do css-a

.result [id^="r_value"] {
  position: absolute;
  width: 20px;
  bottom: 1em;
  transition: height 1s cubic-bezier(0.5,-0.5,0.25,1.4);
}
.result div:nth-child(1) {
  left: 5%;
  background-color: black;
  background-image: linear-gradient(to top, black, gray, silver);
}
.result div:nth-child(2) {
  left: 10%;
  background-color: yellow;
  background-image: linear-gradient(to top, gold, yellow, lightyellow);
}
.result div:nth-child(3) {
  left: 15%;
  background-color: red;
  background-image: linear-gradient(to top, darkred, red, peachpuff);
}

 

1
komentarz 9 czerwca 2022 przez MisticVoid Początkujący (490 p.)

Bardzo wszystkim dziękuję za pomoc. Jeśli chodzi o niektóre może nie zrozumiałe lub bezsensowne rzeczy w kodzie to jestem dopiero początkującym i myślę na dosyć prosty sposób smiley

0 głosów
odpowiedź 8 czerwca 2022 przez Zaqu93 Gaduła (4,850 p.)
document.getElementById("value1")

Zwraca referencje do obiektu w drzewie DOM.

Żeby odwołać się do wartości inputa musisz skorzystać z parametru value, więc:

var wysokosc = document.getElementById("value1").value;

 

–2 głosów
odpowiedź 8 czerwca 2022 przez doublechess Obywatel (1,300 p.)

JQuery:

var wysokosc = $("#value1");

JavaScript:

var wysokosc = document.getElementById("value1");

Podobne pytania

0 głosów
2 odpowiedzi 117 wizyt
pytanie zadane 9 września 2019 w HTML i CSS przez Xenoxer Użytkownik (560 p.)
0 głosów
1 odpowiedź 282 wizyt

92,454 zapytań

141,262 odpowiedzi

319,089 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...