0
Ich habe den Code für die Anzeige der Bereichsschiebereglerwerte geschrieben. Jetzt möchte ich beide Werte für die Bereichsschieberegler hinzufügen und im Textfeld anzeigen. Wie mache ich es?Wie füge ich zwei Bereichsschieberegler hinzu und drucke den Wert in einem Textfeld mit Javascript?
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.h
{
position:absolute;
left:50px;
top:100px;
}
.P
{
position:absolute;
left:50px;
top:140px;
}
.i1
{
position:absolute;
left:150px;
width:100px;
height:40px;
top:250px;
}
.i2
{
position:absolute;
left:600px;
width:100px;
height:40px;
top:250px;
}
.i3
{
position:absolute;
right:300px;
width:100px;
height:40px;
top:250px;
}
.P1
{
position:absolute;
left:150px;
top:210px;
font-size:15px;
}
.P2
{
position:absolute;
left:600px;
top:210px;
font-size:15px;
}
.img1
{
position:absolute;
left:380px;
width:90px;
height:60px;
top:245px;
}
.img2
{
position:absolute;
right:480px;
width:90px;
height:60px;
top:240px;
}
.r1
{
position:absolute;
bottom:150px;
left:150px;
width:180px;
height:10px;
-webkit-appearance:none;
border-radius:5px;
background:#d7dcdf;
outline:blue;
padding:0;
margin:0;
cursor:pointer;
}
.r1::-webkit-slider-thumb
{
-webkit-appearance:none;
width:20px;
height:20px;
border:0;
border-radius:50%;
background:lightblue;
cursor:pointer;
}
.r1:hover
{
background:lightblue;
}
.spa
{
position:absolute;
bottom:150px;
left:340px;
display:inline-block;
background:lightblue;
border-radius:3px;
line-height:20px;
text-align:center;
padding: 5px 10px;
margin-left: 8px;
}
.P3
{
position:absolute;
left:90px;
bottom:135px;
}
.P4
{
position:absolute;
left:77px;
bottom:95px;
}
.r2
{
position:absolute;
bottom:110px;
left:150px;
width:180px;
height:10px;
-webkit-appearance:none;
border-radius:5px;
background:#d7dcdf;
outline:blue;
padding:0;
margin:0;
cursor:pointer;
}
.r2::-webkit-slider-thumb
{
-webkit-appearance:none;
width:20px;
height:20px;
border:0;
border-radius:50%;
background:lightblue;
cursor:pointer;
}
.r2:hover
{
background:lightblue;
}
.spa1{
position:absolute;
bottom:110px;
left:340px;
display:inline-block;
background:lightblue;
border-radius:3px;
line-height:20px;
text-align:center;
padding: 5px 10px;
margin-left: 8px;
}
</style>
</head>
<body>
<h4 class="h">Score recommendation </h4>
<p class="P">Based on the inputs given by you, we recommend the following score splits that you should aim for to achieve the desired target score </p>
<p class="P1">Quant Score</p>
<input type="text" id="Q1" class="i1" onclick="ret(this.value);" value="">
<img src="plus.png" alt="plus" class="img1">
<p class="P2"> Verbal Score</p>
<input type="text" id="s2" class="i2">
<img src="equal.jpg" alt="equal" class="img2">
<input type="text" id="s3" class="i3">
<p class="P3">Algebra</p><input type="range" min="20" max="180" value="20" step="1" class="r1" onchange="showValue(this.value);" >
<span id="range" class="spa">20</span>
<p class="P4">Arithmetic</p><input type="range" min="20" max="180" value="20" step="1" class="r2" onchange="showValue1(this.value);" >
<span id="range1" class="spa1">20</span>
<script>
function showValue(newValue){
document.getElementById("range").innerHTML=newValue;
}
function showValue1(newValue1){
document.getElementById("range1").innerHTML=newValue1;
}
function ret(q){
var q1,q2;
q1=document.getElementById("range").value;
q2=document.getElementById("range1").value;
q=q1+q2;
document.getElementById("Q1").innerHTML=q;
}
</script>
</body>
</html>
danke Ihnen so viel hat es funktioniert. –