How to make button appear when input reaches max value?-CodePudding

So i want the button to appear when the slider reaches 100% in either one of App-Benutzer or Bürosoftware-Benutzer and when its not at 100% i want it to dissappear.

function checkMaxInput(element) {
  var hidden = document.getElementById('hiddenMax');
  if (hidden) {
    this.value == this.max ? (hidden.style.visibility = 'visible') : (hidden.style.visibility = 'hidden')
  }
}

I tried to create a function but i guess i didnt do it right yet.

var percent = 1; //Standardvalue for yearly
var percentmonthly = 1.2 //Standardvalue for monthly

//diese funktion wird ausgelöst wenn das html-dokument vollstaendig geladen wird
document.addEventListener("DOMContentLoaded", function (event) {

  var updatecolor = document.querySelectorAll('.updatecolor');
  //anzeige der farbe im range slider
  document.querySelectorAll(".updatecolor").forEach(updateinputs =>
    updateinputs.addEventListener("input", function () {
      var percent = calcPercent(this.value, this.min, this.max);
      const bg = getComputedStyle(this).getPropertyValue('--background');
      const slider = getComputedStyle(this).getPropertyValue('--slider');
      var colorchanger = this.getAttribute('rangecolorid');
      var sliderselect = document.querySelector('#'   colorchanger);
      sliderselect.setAttribute(
        'style',
        ` background:linear-gradient(to right,${slider},${slider} ${percent}%,${bg} ${percent}%) `
      )
    })
  );

  //Initiale Anzeige der Daten
  calcSum();
  
  
});
//hides when app-benutzer or bürosoftware-benutzer is at 100%
function checkMaxInput(element) {
  var hidden = document.getElementById('hiddenMax');
  if (hidden) {
    this.value == this.max ? (hidden.style.visibility = 'visible') : (hidden.style.visibility = 'hidden')
  }
}

//funktion damit der Slider sich beim eingeben vom input field bewegt
function updateUser(val, inputtype) {
  if (inputtype == 'Appuserrangecolor') {
    document.getElementById('AppInput').value = val;
  }
  if (inputtype == 'AppInput') {
    document.getElementById('Appuserrangecolor').value = val;
  }
  if (inputtype == 'Backendrangecolor') {
    document.getElementById('BackendInput').value = val;
  }
  if (inputtype == 'BackendInput') {
    document.getElementById('Backendrangecolor').value = val;
  }
  calcSum();
}

//Calculates the percentage of the currentval with the base of a min and max value
function calcPercent(curval, min, max) {
  return ((curval - min) / (max - min)) * 100;
}

//Rechnung für die Anzahl von Backend und App-Benutzern
function calcSum() {

}
//funktion um preisstaffel zu berechnen
function getPrice(pricemodels, percent, amount) {
  for (var key in pricemodels) {
    //If key is higher than the selected amount, return the value
    if (parseInt(key) >= parseInt(amount)) {
      return pricemodels[key] * percent;
    }
  }
}

html, body {
  background-color: rgb(255, 255, 255);
  height: 100%;
  margin: 0;
}

header{
  text-align: center;
  font-size: 20px;
}

body, table, select {
  font-size: 12px;
}
  

input[type=range]{
  border-radius: 32px;
  height: 10px;
  cursor: pointer;
}

*, *::before, *::after {
  box-sizing: border-box;
}

.grid-container {
    display: grid;
  grid-template-columns:600px 250px ;
  grid-auto-rows: minmax(150px, auto);
  justify-items: stretch;
  align-items: stretch;
}
.grid-item-1 {
  align-self: start;
  justify-self: center;
}

.text-grey{
  color:grey;
}

.grid-container {
  padding: 60px;
  width: 100%;
  grid-template-columns: 250px 200px;
}

#Backendrangecolor, #Appuserrangecolor, #BackendInput, #AppInput {
  --background: rgb(96,125,139,0.33);
  --slider: #00ba7a;
  background: var(--background);
  -webkit-appearance: none;
  width: 150px;
  
}
#Backendrangecolor, #Appuserrangecolor :-moz-range-thumb {
  background: purple;
}


.grid-item {
  padding: 20px;
  padding-top: 15px;
  background-color: #f8f8f8;
  color: #222;
  border: 7px solid rgba(96,125,139,0.33);
}

.grid-item:nth-child(odd) {
  background-color: #f8f8f8;
}

.target { 
  display: none; 
}
/* Base styling*/
body {
  background-color: #f8f8f8;
  max-width: 768px;
  margin: 0 auto;
  padding: 1em 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}


a {
  text-decoration: none;
}


}

.price-container .text {
    width: 80px;
    display: inline-block;
    text-align: right;
}

.price-container .value {
    width: 30px;
    display: inline-block;
    text-align: left;
}
.button {
  text-align: center;
  width: 75px;
  height: auto;
  font-size:8px;
  color:#f8f8f8 ;
  background-color: rgba(255,167,55,1);
  border: rgba(255,167,55,1);

  
}

  <html>
  <head>
    <link rel="stylesheet" href="styles.css">
    <script src="./app.js"></script>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>
    <div >
      <div style="width: 270px">
        <header>Preiskalkulator</header>
        <div >
          App-Benutzer: <br>
          <input id="Appuserrangecolor" value="0" type="range" rangecolorid="Appuserrangecolor" min="0" max="100" oninput="updateUser(this.value, 'Appuserrangecolor');" class='appuser updatecolor'></input>
          <input class='updatecolor' style="width: 30px;border-color: var(--form_border_color);" type="text" id="AppInput" value="0" placeholder="1-100" rangecolorid="Appuserrangecolor" min="0" max="100" oninput="this.value = this.value > 100 ? 100 : Math.abs(this.value); updateUser(this.value, 'AppInput');"><br>
          Bürosoftware-Benutzer: <br>
          <input id="Backendrangecolor" value="1" type="range" rangecolorid="Backendrangecolor" min="1" max="15" oninput="updateUser(this.value, 'Backendrangecolor'); " class='backenduser updatecolor'></input>
          <input class='updatecolor' style="width: 30px;border-color: var(--form_border_color);" type="text" id="BackendInput" rangecolorid="Backendrangecolor" value="1" min="1" max="15" placeholder="1-15" oninput="this.value = this.value > 15 ? 15 : Math.abs(this.value,); updateUser(this.value, 'BackendInput');"><br>
        </div>
      <div  style="width: 270px">
        <div id="hiddenMax" style="margin-left: auto;margin-right: auto;margin-top: 10px;">
          <button  ><a  target="blank" href="https://solutions.stressfrei.de/kontakt/">Größeres Packet auf Anfrage</a></button>
        </div>
      </div>
    </div>
  </body>
</html>

CodePudding user response：

You can rewrite checkMaxInput first

Since updateUser will sync range input and text input

We can simply pick just two input that represent App-Benutzer and Bürosoftware-Benutzer as condition

If slider reachs 100% means that App-Benutzer's value will be 100 and Bürosoftware-Benutzer's value will be 15

So, we can rewrite checkMaxInput like below:

function checkMaxInput() {
  var hidden = document.getElementById("hiddenMax");
  if (
    document.getElementById("AppInput").value === "100" ||
    document.getElementById("BackendInput").value === "15"
  ) {
    hidden.style.visibility = "visible";
  } else {
    hidden.style.visibility = "hidden";
  }
}

Then, you can call it after updateUser finished task to sync input's value

For example

function updateUser(val, inputtype) {

  if (inputtype == "Appuserrangecolor") {
    document.getElementById("AppInput").value = val;
  }
  if (inputtype == "AppInput") {
    document.getElementById("Appuserrangecolor").value = val;
  }
  if (inputtype == "Backendrangecolor") {
    document.getElementById("BackendInput").value = val;
  }
  if (inputtype == "BackendInput") {
    document.getElementById("Backendrangecolor").value = val;
  }
  calcSum();
  checkMaxInput();
}

Finally, if you want the button was hidden initially

You have to add these two line in your DOMContentLoaded's callback function

var hidden = document.getElementById("hiddenMax");
hidden.style.visibility = "hidden";

Or simply write style visibility: hidden; at #hiddenMax in HTML

CodePudding user response：

I suggest to use a pure function to check if the element needs to be shown or not, something like this

function checkMaxInput(element) {
    var attrs = element.attributes;
    return element.value == attrs.max.nodeValue;
  
}

function updateUser(element, inputtype) {
  var hidden = document.getElementById('hiddenMax');
  checkMaxInput(element) ? 
    hidden.style.visibility = 'visible' : 
    hidden.style.visibility = 'hidden';
}

see a simplified example here https://jsbin.com/cucemujiyo/1/edit?html,css,js,output