Problem z przypisywaniem wartości height do div

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

3 odpowiedzi

odpowiedź 8 czerwca 2022 przez VBService Ekspert (256,600 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