Using buttons and radio buttons together

Hello, I want to make:

When I push up/down button number inside input increase/decrease (I made it). But there is also radio buttons.Big number content that comes after header must replace its content with radio button that we clicked. And then when press up and down button content continues to increasing/decreasing. I wish you understood me :slight_smile:

Codepen Demo

And what exactly is the problem you’re having?

According to the codepen, he has the html layout, but doesn’t have the code to hook it all up. No JS or anything.

This sounds like a cargo cult, where you make the HTML for the looks of things, and the code to make it work will just magically arrive.

… and YOU are the magician, Paul!

Here is how you increment a number by using a button click:

Homework: Figure out how to decrement the number.

I’ve written some JS. But it is not completely working. It doesn’t make choice to replace with big text

Here demo:
JS Demo

I guess you’re right. Shazaam!!

And now, the magician disappears in a puff of vapidity.

var radioButtons = document.querySelectorAll(".resultPrice+.labels label");
Array.from(radioButtons).forEach(function (label) {
  label.addEventListener("click", labelClickHandler, false);
});
function labelClickHandler(evt) {
  var label = evt.currentTarget;
  updatePrice(label);
}
function updatePrice(label) {
  const currency = label.querySelector(".valName").innerHTML;
  const cost = label.querySelector(".cost").innerHTML;
  document.querySelector(".resultPrice sup").innerHTML = currency;
  document.querySelector(".resultPrice span").innerHTML = cost;
  
  document.getElementById(currency).checked = true;
}
var changer = document.querySelector(".upDown");
changer.addEventListener("click", updownClickHandler, false);
function updownClickHandler(evt) {
  var caret = evt.target;
  caret = getCaret(caret);
  if (isUpCaret(caret)) {
    showPreviousFrom(caret);
  } else if (isDownCaret(caret)){
    showNextFrom(caret);
  }
}
function getCaret(caret) {
  while (
    !isUpCaret(caret) &&
    !isDownCaret(caret) &&
    !(caret.nodeName === "HTML")
  ) {
    caret = caret.parentNode;
  }
  return caret;
}
function isUpCaret(caret) {
  return caret.classList.contains("up");
}
function isDownCaret(caret) {
  return caret.classList.contains("down");
}
function showPreviousFrom(el) {
  var changer = findFromEl(el, "changer");
  changer.currentIndex = changer.currentIndex || 0;
  changer.currentIndex -= 1;
  if (changer.currentIndex < 0) {
    changer.currentIndex = 0;
  }
  showChangerInput(changer);
  
}
function showNextFrom(el) {
  var changer = findFromEl(el, "changer");
  var maxIndex = changer.querySelectorAll("input").length - 1;
  changer.currentIndex = changer.currentIndex || 0;
  changer.currentIndex += 1;
  if (changer.currentIndex > maxIndex) {
    changer.currentIndex = maxIndex;
  }
  showChangerInput(changer);
}
function findFromEl(el, className) {
  while (!el.classList.contains(className) && el.nodeName !== "HTML") {
    el = el.parentNode;
  }
  if (el.nodeName === "HTML") {
    return false;
  }
  return el;
}
function showChangerInput(changer) {
  var inputs = changer.querySelectorAll("input");
  Array.from(inputs).forEach(function (input, i) {
    if (i === changer.currentIndex) {
      input.classList.remove("hide");
      input.disabled = false;
    } else {
      input.classList.add("hide");
      input.disabled = true;
    }
  });
}

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.