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);
}