Ich übe gerade WebDev und arbeite an einer interaktiven Ernährungspyramide. Ich konnte die anderen Eingänge ausrichten, aber die Eingänge oben auf dem Dreieck bereiten mir Probleme. Ich habe alles versucht, von Floats bis zu Flex- und Inline-Blöcken. Nichts scheint zu funktionieren, jede Hilfe wäre sehr dankbar.

function incrementValue1() {
  let value = parseInt(document.getElementById('number1').value, 10);
  value = isNaN(value) ? 0 : value;
  value++;
  document.getElementById('number1').value = value;
}

function decrementValue1() {
  let value = parseInt(document.getElementById('number1').value, 10);
  value = isNaN(value) ? 0 : value;
  if (value > 0) {
    value--;
  }
  document.getElementById('number1').value = value;
}

function incrementValue2() {
  let value = parseInt(document.getElementById('number2').value, 10);
  value = isNaN(value) ? 0 : value;
  value++;
  document.getElementById('number2').value = value;
}

function decrementValue2() {
  let value = parseInt(document.getElementById('number2').value, 10);
  value = isNaN(value) ? 0 : value;
  if (value > 0) {
    value--;
  }
  document.getElementById('number2').value = value;
}

function incrementValue3() {
  let value = parseInt(document.getElementById('number3').value, 10);
  value = isNaN(value) ? 0 : value;
  value++;
  document.getElementById('number3').value = value;
}

function decrementValue3() {
  let value = parseInt(document.getElementById('number3').value, 10);
  value = isNaN(value) ? 0 : value;
  if (value > 0) {
    value--;
  }
  document.getElementById('number3').value = value;
}

function incrementValue4() {
  let value = parseInt(document.getElementById('number4').value, 10);
  value = isNaN(value) ? 0 : value;
  value++;
  document.getElementById('number4').value = value;
}

function decrementValue4() {
  let value = parseInt(document.getElementById('number4').value, 10);
  value = isNaN(value) ? 0 : value;
  if (value > 0) {
    value--;
  }
  document.getElementById('number4').value = value;
}

function incrementValue5() {
  let value = parseInt(document.getElementById('number5').value, 10);
  value = isNaN(value) ? 0 : value;
  value++;
  document.getElementById('number5').value = value;
}

function decrementValue5() {
  let value = parseInt(document.getElementById('number5').value, 10);
  value = isNaN(value) ? 0 : value;
  if (value > 0) {
    value--;
  }
  document.getElementById('number5').value = value;
}

function incrementValue6() {
  let value = parseInt(document.getElementById('number6').value, 10);
  value = isNaN(value) ? 0 : value;
  value++;
  document.getElementById('number6').value = value;
}

function decrementValue6() {
  let value = parseInt(document.getElementById('number6').value, 10);
  value = isNaN(value) ? 0 : value;
  if (value > 0) {
    value--;
  }
  document.getElementById('number6').value = value;
}

var colors = ["red", "blue", "green", "yellow", "purple", "gold", "pink", "grey", "turquoise", "aqua"];
var i = 0;
var selectedColor;

function changeColour() {
  selectedColor = colors[i];
  document.getElementById("number" + 1).style.backgroundColor = selectedColor;
  i++;
  if (i > colors.length)
    i = 0;
}

function printDate() {
  let value = document.getElementById("date").value;
  document.getElementById("check").innerHTML = "Date: " + value;
}
.container {
  text-align: center;
  position: relative;
  top: 40%;
}

.inside-text1 {
  display: none;
  position: absolute;
  top: 20px;
  left: 248px;
  text-align: center;
  bottom: -65px;
}

.inside-text {
  display: none;
  position: relative;
  text-align: center;
  bottom: -25px;
}

.inside-text6 {
  display: none;
  position: relative;
  text-align: center;
  bottom: -120px;
  /*float: left;*/
}

#p6 {
  border-bottom: 200px solid blue;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  height: 0;
  width: 0;
  margin-right: auto;
  margin-left: auto;
}

#p5-5 {
  border-bottom: 20px solid white;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  height: 0;
  width: 10px;
  margin-right: auto;
  margin-left: auto;
}

#p5 {
  border-bottom: 80px solid black;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  height: 0;
  width: 220px;
  margin-right: auto;
  margin-left: auto;
}

#p4-5 {
  border-bottom: 20px solid white;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  height: 0;
  width: 240px;
  margin-right: auto;
  margin-left: auto;
}

#p4 {
  border-bottom: 80px solid purple;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  height: 0;
  width: 330px;
  margin-right: auto;
  margin-left: auto;
}

#p3 {
  border-bottom: 80px solid green;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  height: 0;
  width: 420px;
  margin-right: auto;
  margin-left: auto;
}

#p2 {
  border-bottom: 80px solid yellow;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  height: 0;
  width: 510px;
  margin-right: auto;
  margin-left: auto;
}

#p1 {
  position: relative;
  top: 40%;
  border-bottom: 80px solid red;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  height: 0;
  width: 600px;
  margin-right: auto;
  margin-left: auto;
}

#p1:hover .inside-text1 {
  display: block;
}

#p2:hover .inside-text {
  display: block;
}

#p3:hover .inside-text {
  display: block;
}

#p4:hover .inside-text {
  display: block;
}

#p5:hover .inside-text {
  display: block;
}

#p6:hover .inside-text6 {
  display: block;
}

.button {
  margin-right: auto;
  margin-left: auto;
  position: relative;
}

#b1 {
  display: inline-block;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#number1 {
  display: inline-block;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  border: solid red;
  background-color: grey;
  text-align: center;
}

#b2 {
  display: inline-block;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#b3 {
  display: inline-block;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#number2 {
  display: inline-block;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#b4 {
  display: inline-block;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#b5 {
  display: inline-block;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#number3 {
  display: inline-block;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#b6 {
  display: inline-block;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#b7 {
  display: inline-block;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#number4 {
  display: inline-block;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#b8 {
  display: inline-block;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#b9 {
  display: inline-block;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#number5 {
  display: inline-block;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#b10 {
  display: inline-block;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#b11 {
  /*display: inline-flex;*/
  float: left;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#number6 {
  /*display: inline-flex;*/
  float: left;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#b12 {
  /*display: inline-flex;*/
  float: left;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#check {
  display: block;
  position: center;
  height: 25px;
  width: 125px;
  /*border-radius: 50%;*/
  border: solid red;
  text-align: center;
}
<div class="container">
  <div id="p6">
    <div class="inside-text6">
      <input type="button" onclick="decrementValue6()" value="-" id="b11" />
      <label for="number6"></label><input type="text" id="number6" value="0" />
      <input type="button" onclick="incrementValue6()" value="+" id="b12" />
    </div>
  </div>

  <div id="p5-5"></div>

  <div id="p5">
    <div class="inside-text">
      <form>
        <input type="button" onclick="decrementValue5()" value="-" id="b9" />
        <label for="number5"></label><input type="text" id="number5" value="1" />
        <input type="button" onclick="incrementValue5()" value="+" id="b10" />
      </form>
    </div>
  </div>

  <div id="p4-5"></div>

  <div id="p4">
    <div class="inside-text">
      <form>
        <input type="button" onclick="decrementValue4()" value="-" id="b7" />
        <label for="number4"></label><input type="text" id="number4" value="2" />
        <input type="button" onclick="incrementValue4();" value="+" id="b8" />
      </form>
    </div>
  </div>

  <div id="p3">
    <div class="inside-text">
      <form>
        <input type="button" onclick="decrementValue3()" value="-" id="b5" />
        <label for="number3"></label><input type="text" id="number3" value="3" />
        <input type="button" onclick="incrementValue3()" value="+" id="b6" />
      </form>
    </div>
  </div>

  <div id="p2">
    <div class="inside-text">
      <form>
        <input type="button" onclick="decrementValue2()" value="-" id="b3" />
        <label for="number2"></label><input type="text" id="number2" value="4" />
        <input type="button" onclick="incrementValue2()" value="+" id="b4" />
      </form>
    </div>
  </div>
  <div id="p1">
    <div class="inside-text1">
      <form>
        <input type="button" onclick="decrementValue1('number6');changeColour()" value="-" id="b2" />
        <input type="text" id="number1" value="6" />
        <input type="button" onclick="incrementValue1();changeColour()" value="+" id="b1" />
      </form>
    </div>
  </div>
</div>

<label for="date">Enter Date of Submission:</label>
<input type="date" id="date" value="0" />
<input type="button" onclick="printDate()" value="Record" />

<div id="check"></div>
0
Odin_is_with_us 19 Feb. 2020 im 22:21

4 Antworten

Beste Antwort

Ich würde mit Flex und Center gehen.

.inside-text6 {
  display: none;
  position: relative;
  text-align: center;
  bottom: -120px;
  align-items: center;
  justify-content: center;
}

Und wechseln Sie beim Hover zu display: flex

#p6:hover .inside-text6 {
  display: flex;
}

Sie sollten Ihren Code auch mit nur einer Inkrementierungs- / Dekrementierungsfunktion mit der Element-ID als Parameter verbessern. Sowas in der Art

function incrementValue(el)
{
    let value = parseInt(document.getElementById(el).value, 10);
    value = isNaN(value) ? 0 : value;
    value++;
    document.getElementById(el).value = value;
}

function decrementValue(el)
{
    let value = parseInt(document.getElementById(el).value, 10);
    value = isNaN(value) ? 0 : value;
    if(value>0)
    {
        value--;
    }
    document.getElementById(el).value = value;
}

Und du würdest es so nennen

<input type="button" onclick="decrementValue('number1')" value="-" id="b1" />
<input type="button" onclick="decrementValue('number2')" value="-" id="b2" />
<input type="button" onclick="decrementValue('number3')" value="-" id="b3" />
...
function incrementValue1() {
  let value = parseInt(document.getElementById('number1').value, 10);
  value = isNaN(value) ? 0 : value;
  value++;
  document.getElementById('number1').value = value;
}

function decrementValue1() {
  let value = parseInt(document.getElementById('number1').value, 10);
  value = isNaN(value) ? 0 : value;
  if (value > 0) {
    value--;
  }
  document.getElementById('number1').value = value;
}

function incrementValue2() {
  let value = parseInt(document.getElementById('number2').value, 10);
  value = isNaN(value) ? 0 : value;
  value++;
  document.getElementById('number2').value = value;
}

function decrementValue2() {
  let value = parseInt(document.getElementById('number2').value, 10);
  value = isNaN(value) ? 0 : value;
  if (value > 0) {
    value--;
  }
  document.getElementById('number2').value = value;
}

function incrementValue3() {
  let value = parseInt(document.getElementById('number3').value, 10);
  value = isNaN(value) ? 0 : value;
  value++;
  document.getElementById('number3').value = value;
}

function decrementValue3() {
  let value = parseInt(document.getElementById('number3').value, 10);
  value = isNaN(value) ? 0 : value;
  if (value > 0) {
    value--;
  }
  document.getElementById('number3').value = value;
}

function incrementValue4() {
  let value = parseInt(document.getElementById('number4').value, 10);
  value = isNaN(value) ? 0 : value;
  value++;
  document.getElementById('number4').value = value;
}

function decrementValue4() {
  let value = parseInt(document.getElementById('number4').value, 10);
  value = isNaN(value) ? 0 : value;
  if (value > 0) {
    value--;
  }
  document.getElementById('number4').value = value;
}

function incrementValue5() {
  let value = parseInt(document.getElementById('number5').value, 10);
  value = isNaN(value) ? 0 : value;
  value++;
  document.getElementById('number5').value = value;
}

function decrementValue5() {
  let value = parseInt(document.getElementById('number5').value, 10);
  value = isNaN(value) ? 0 : value;
  if (value > 0) {
    value--;
  }
  document.getElementById('number5').value = value;
}

function incrementValue6() {
  let value = parseInt(document.getElementById('number6').value, 10);
  value = isNaN(value) ? 0 : value;
  value++;
  document.getElementById('number6').value = value;
}

function decrementValue6() {
  let value = parseInt(document.getElementById('number6').value, 10);
  value = isNaN(value) ? 0 : value;
  if (value > 0) {
    value--;
  }
  document.getElementById('number6').value = value;
}

var colors = ["red", "blue", "green", "yellow", "purple", "gold", "pink", "grey", "turquoise", "aqua"];
var i = 0;
var selectedColor;

function changeColour() {
  selectedColor = colors[i];
  document.getElementById("number" + 1).style.backgroundColor = selectedColor;
  i++;
  if (i > colors.length)
    i = 0;
}

function printDate() {
  let value = document.getElementById("date").value;
  document.getElementById("check").innerHTML = "Date: " + value;
}
.container {
  text-align: center;
  position: relative;
  top: 40%;
}

.inside-text1 {
  display: none;
  position: absolute;
  top: 20px;
  left: 248px;
  text-align: center;
  bottom: -65px;
}

.inside-text {
  display: none;
  position: relative;
  text-align: center;
  bottom: -25px;
}

.inside-text6 {
  display: none;
  position: relative;
  text-align: center;
  bottom: -120px;
  align-items: center;
  justify-content: center;
  /*float: left;*/
}

#p6 {
  border-bottom: 200px solid blue;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  height: 0;
  width: 0;
  margin-right: auto;
  margin-left: auto;
}

#p5-5 {
  border-bottom: 20px solid white;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  height: 0;
  width: 10px;
  margin-right: auto;
  margin-left: auto;
}

#p5 {
  border-bottom: 80px solid black;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  height: 0;
  width: 220px;
  margin-right: auto;
  margin-left: auto;
}

#p4-5 {
  border-bottom: 20px solid white;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  height: 0;
  width: 240px;
  margin-right: auto;
  margin-left: auto;
}

#p4 {
  border-bottom: 80px solid purple;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  height: 0;
  width: 330px;
  margin-right: auto;
  margin-left: auto;
}

#p3 {
  border-bottom: 80px solid green;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  height: 0;
  width: 420px;
  margin-right: auto;
  margin-left: auto;
}

#p2 {
  border-bottom: 80px solid yellow;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  height: 0;
  width: 510px;
  margin-right: auto;
  margin-left: auto;
}

#p1 {
  position: relative;
  top: 40%;
  border-bottom: 80px solid red;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  height: 0;
  width: 600px;
  margin-right: auto;
  margin-left: auto;
}

#p1:hover .inside-text1 {
  display: block;
}

#p2:hover .inside-text {
  display: block;
}

#p3:hover .inside-text {
  display: block;
}

#p4:hover .inside-text {
  display: block;
}

#p5:hover .inside-text {
  display: block;
}

#p6:hover .inside-text6 {
  display: flex;
}

.button {
  margin-right: auto;
  margin-left: auto;
  position: relative;
}

#b1 {
  display: inline-block;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#number1 {
  display: inline-block;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  border: solid red;
  background-color: grey;
  text-align: center;
}

#b2 {
  display: inline-block;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#b3 {
  display: inline-block;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#number2 {
  display: inline-block;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#b4 {
  display: inline-block;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#b5 {
  display: inline-block;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#number3 {
  display: inline-block;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#b6 {
  display: inline-block;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#b7 {
  display: inline-block;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#number4 {
  display: inline-block;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#b8 {
  display: inline-block;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#b9 {
  display: inline-block;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#number5 {
  display: inline-block;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#b10 {
  display: inline-block;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#b11 {
  /*display: inline-flex;*/
  float: left;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#number6 {
  /*display: inline-flex;*/
  float: left;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#b12 {
  /*display: inline-flex;*/
  float: left;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#check {
  display: block;
  position: center;
  height: 25px;
  width: 125px;
  /*border-radius: 50%;*/
  border: solid red;
  text-align: center;
}
<div class="container">
  <div id="p6">
    <div class="inside-text6">
      <input type="button" onclick="decrementValue6()" value="-" id="b11" />
      <label for="number6"></label><input type="text" id="number6" value="0" />
      <input type="button" onclick="incrementValue6()" value="+" id="b12" />
    </div>
  </div>

  <div id="p5-5"></div>

  <div id="p5">
    <div class="inside-text">
      <form>
        <input type="button" onclick="decrementValue5()" value="-" id="b9" />
        <label for="number5"></label><input type="text" id="number5" value="1" />
        <input type="button" onclick="incrementValue5()" value="+" id="b10" />
      </form>
    </div>
  </div>

  <div id="p4-5"></div>

  <div id="p4">
    <div class="inside-text">
      <form>
        <input type="button" onclick="decrementValue4()" value="-" id="b7" />
        <label for="number4"></label><input type="text" id="number4" value="2" />
        <input type="button" onclick="incrementValue4();" value="+" id="b8" />
      </form>
    </div>
  </div>

  <div id="p3">
    <div class="inside-text">
      <form>
        <input type="button" onclick="decrementValue3()" value="-" id="b5" />
        <label for="number3"></label><input type="text" id="number3" value="3" />
        <input type="button" onclick="incrementValue3()" value="+" id="b6" />
      </form>
    </div>
  </div>

  <div id="p2">
    <div class="inside-text">
      <form>
        <input type="button" onclick="decrementValue2()" value="-" id="b3" />
        <label for="number2"></label><input type="text" id="number2" value="4" />
        <input type="button" onclick="incrementValue2()" value="+" id="b4" />
      </form>
    </div>
  </div>
  <div id="p1">
    <div class="inside-text1">
      <form>
        <input type="button" onclick="decrementValue1('number6');changeColour()" value="-" id="b2" />
        <input type="text" id="number1" value="6" />
        <input type="button" onclick="incrementValue1();changeColour()" value="+" id="b1" />
      </form>
    </div>
  </div>
</div>

<label for="date">Enter Date of Submission:</label>
<input type="date" id="date" value="0" />
<input type="button" onclick="printDate()" value="Record" />

<div id="check"></div>
0
user1403588 19 Feb. 2020 im 19:40

Sie können Flex + Justify-Content verwenden, um Inhalte zu zentrieren und zu vermeiden, dass sie in ein paar Zeilen eingeschlossen werden:

#p6:hover .inside-text6 {
    display:flex;
  justify-content:center;/* it will center content which might overflow on both sides too */
}

Demo Ihres Codes aktualisiert, um unten ausgeführt zu werden:

function incrementValue1() {
  let value = parseInt(document.getElementById('number1').value, 10);
  value = isNaN(value) ? 0 : value;
  value++;
  document.getElementById('number1').value = value;
}

function decrementValue1() {
  let value = parseInt(document.getElementById('number1').value, 10);
  value = isNaN(value) ? 0 : value;
  if (value > 0) {
    value--;
  }
  document.getElementById('number1').value = value;
}

function incrementValue2() {
  let value = parseInt(document.getElementById('number2').value, 10);
  value = isNaN(value) ? 0 : value;
  value++;
  document.getElementById('number2').value = value;
}

function decrementValue2() {
  let value = parseInt(document.getElementById('number2').value, 10);
  value = isNaN(value) ? 0 : value;
  if (value > 0) {
    value--;
  }
  document.getElementById('number2').value = value;
}

function incrementValue3() {
  let value = parseInt(document.getElementById('number3').value, 10);
  value = isNaN(value) ? 0 : value;
  value++;
  document.getElementById('number3').value = value;
}

function decrementValue3() {
  let value = parseInt(document.getElementById('number3').value, 10);
  value = isNaN(value) ? 0 : value;
  if (value > 0) {
    value--;
  }
  document.getElementById('number3').value = value;
}

function incrementValue4() {
  let value = parseInt(document.getElementById('number4').value, 10);
  value = isNaN(value) ? 0 : value;
  value++;
  document.getElementById('number4').value = value;
}

function decrementValue4() {
  let value = parseInt(document.getElementById('number4').value, 10);
  value = isNaN(value) ? 0 : value;
  if (value > 0) {
    value--;
  }
  document.getElementById('number4').value = value;
}

function incrementValue5() {
  let value = parseInt(document.getElementById('number5').value, 10);
  value = isNaN(value) ? 0 : value;
  value++;
  document.getElementById('number5').value = value;
}

function decrementValue5() {
  let value = parseInt(document.getElementById('number5').value, 10);
  value = isNaN(value) ? 0 : value;
  if (value > 0) {
    value--;
  }
  document.getElementById('number5').value = value;
}

function incrementValue6() {
  let value = parseInt(document.getElementById('number6').value, 10);
  value = isNaN(value) ? 0 : value;
  value++;
  document.getElementById('number6').value = value;
}

function decrementValue6() {
  let value = parseInt(document.getElementById('number6').value, 10);
  value = isNaN(value) ? 0 : value;
  if (value > 0) {
    value--;
  }
  document.getElementById('number6').value = value;
}

var colors = ["red", "blue", "green", "yellow", "purple", "gold", "pink", "grey", "turquoise", "aqua"];
var i = 0;
var selectedColor;

function changeColour() {
  selectedColor = colors[i];
  document.getElementById("number" + 1).style.backgroundColor = selectedColor;
  i++;
  if (i > colors.length)
    i = 0;
}

function printDate() {
  let value = document.getElementById("date").value;
  document.getElementById("check").innerHTML = "Date: " + value;
}
.container {
  text-align: center;
  position: relative;
  top: 40%;
}

.inside-text1 {
  display: none;
  position: absolute;
  top: 20px;
  left: 248px;
  text-align: center;
  bottom: -65px;
}

.inside-text {
  display: none;
  position: relative;
  text-align: center;
  bottom: -25px;
}

.inside-text6 {
  display: none;
  position: relative;
  text-align: center;
  bottom: -120px
}

#p6 {
  border-bottom: 200px solid blue;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  height: 0;
  width: 0;
  margin-right: auto;
  margin-left: auto;
}

#p5-5 {
  border-bottom: 20px solid white;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  height: 0;
  width: 10px;
  margin-right: auto;
  margin-left: auto;
}

#p5 {
  border-bottom: 80px solid black;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  height: 0;
  width: 220px;
  margin-right: auto;
  margin-left: auto;
}

#p4-5 {
  border-bottom: 20px solid white;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  height: 0;
  width: 240px;
  margin-right: auto;
  margin-left: auto;
}

#p4 {
  border-bottom: 80px solid purple;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  height: 0;
  width: 330px;
  margin-right: auto;
  margin-left: auto;
}

#p3 {
  border-bottom: 80px solid green;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  height: 0;
  width: 420px;
  margin-right: auto;
  margin-left: auto;
}

#p2 {
  border-bottom: 80px solid yellow;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  height: 0;
  width: 510px;
  margin-right: auto;
  margin-left: auto;
}

#p1 {
  position: relative;
  top: 40%;
  border-bottom: 80px solid red;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  height: 0;
  width: 600px;
  margin-right: auto;
  margin-left: auto;
}

#p1:hover .inside-text1 {
  display: block;
}

#p2:hover .inside-text {
  display: block;
}

#p3:hover .inside-text {
  display: block;
}

#p4:hover .inside-text {
  display: block;
}

#p5:hover .inside-text {
  display: block;
}

#p6:hover .inside-text6 {
    display:flex;
  justify-content:center;
}

.button {
  margin-right: auto;
  margin-left: auto;
  position: relative;
}

#b1 {
  display: inline-block;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#number1 {
  display: inline-block;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  border: solid red;
  background-color: grey;
  text-align: center;
}

#b2 {
  display: inline-block;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#b3 {
  display: inline-block;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#number2 {
  display: inline-block;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#b4 {
  display: inline-block;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#b5 {
  display: inline-block;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#number3 {
  display: inline-block;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#b6 {
  display: inline-block;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#b7 {
  display: inline-block;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#number4 {
  display: inline-block;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#b8 {
  display: inline-block;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#b9 {
  display: inline-block;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#number5 {
  display: inline-block;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#b10 {
  display: inline-block;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#b11 {
  /*display: inline-flex;*/
  float: left;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#number6 {
  /*display: inline-flex;*/
  float: left;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#b12 {
  /*display: inline-flex;*/
  float: left;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#check {
  display: block;
  position: center;
  height: 25px;
  width: 125px;
  /*border-radius: 50%;*/
  border: solid red;
  text-align: center;
}
<div class="container">
  <div id="p6">
    <div class="inside-text6">
      <input type="button" onclick="decrementValue6()" value="-" id="b11" />
      <label for="number6"></label><input type="text" id="number6" value="0" />
      <input type="button" onclick="incrementValue6()" value="+" id="b12" />
    </div>
  </div>

  <div id="p5-5"></div>

  <div id="p5">
    <div class="inside-text">
      <form>
        <input type="button" onclick="decrementValue5()" value="-" id="b9" />
        <label for="number5"></label><input type="text" id="number5" value="1" />
        <input type="button" onclick="incrementValue5()" value="+" id="b10" />
      </form>
    </div>
  </div>

  <div id="p4-5"></div>

  <div id="p4">
    <div class="inside-text">
      <form>
        <input type="button" onclick="decrementValue4()" value="-" id="b7" />
        <label for="number4"></label><input type="text" id="number4" value="2" />
        <input type="button" onclick="incrementValue4();" value="+" id="b8" />
      </form>
    </div>
  </div>

  <div id="p3">
    <div class="inside-text">
      <form>
        <input type="button" onclick="decrementValue3()" value="-" id="b5" />
        <label for="number3"></label><input type="text" id="number3" value="3" />
        <input type="button" onclick="incrementValue3()" value="+" id="b6" />
      </form>
    </div>
  </div>

  <div id="p2">
    <div class="inside-text">
      <form>
        <input type="button" onclick="decrementValue2()" value="-" id="b3" />
        <label for="number2"></label><input type="text" id="number2" value="4" />
        <input type="button" onclick="incrementValue2()" value="+" id="b4" />
      </form>
    </div>
  </div>
  <div id="p1">
    <div class="inside-text1">
      <form>
        <input type="button" onclick="decrementValue1('number6');changeColour()" value="-" id="b2" />
        <input type="text" id="number1" value="6" />
        <input type="button" onclick="incrementValue1();changeColour()" value="+" id="b1" />
      </form>
    </div>
  </div>
</div>

<label for="date">Enter Date of Submission:</label>
<input type="date" id="date" value="0" />
<input type="button" onclick="printDate()" value="Record" />

<div id="check"></div>
1
G-Cyrillus 19 Feb. 2020 im 19:35

Versuchen Sie, das folgende CSS zu ändern, und ändern Sie die Übersetzung, um sie zentrieren zu lassen. https://jsfiddle.net/Luodqwhc/

#p6:hover .inside-text6 {
    display: flex;
    align-items: center;
    transform: translate(-42px, -25px);
}
0
vishnu sandhireddy 19 Feb. 2020 im 19:37

Ändern Sie hier Ihr CSS:

#p6:hover .inside-text6{
    display: block;
} 

Die :hover -Regel hat Ihre display: flex -Ansätze außer Kraft gesetzt.


PS: Ich habe dies in eine Geige eingefügt. Dies hilft den Leuten dabei, Ihr Problem leichter zu lösen. Willkommen bei SO! :) :)

0
konrad_pe 19 Feb. 2020 im 19:29