Как при нажатии "ок" в input type color открывать второй input?

Рейтинг: 0Ответов: 1Опубликовано: 05.02.2023

Я пишу генератор градиента и мне нужно чтоб при нажатии кнопки ок в выборе цвета открывался ещё один input. Можно ли так сделать или что-нибудь подобное?

<div class="block" id="divBlock">
  <input type="color" class="inputGradient" id="inputGradient1">
  <input type="color" class="inputGradient" id="inputGradient2">
</div>
<div class="gradientBlock" id="gradientBlock" style="width: 100%; height: 500px;"></div>

const inputGradient1 = document.getElementById("inputGradient1");
const inputGradient2 = document.getElementById("inputGradient2");
const gradientBlock = document.getElementById("gradientBlock");

function gradient() {
  gradientBlock.style.background = "linear-gradient(" + inputGradient1.value + ", " + inputGradient2.value +")";
}
inputGradient1.onchange = gradient;
javascript html
Источник: Stack Overflow на русском

Ответы

▲ 0

Добавьте класс второму input, который будет скрывать его до изменения значения в первом input

const inputGradient1 = document.getElementById("inputGradient1");
const inputGradient2 = document.getElementById("inputGradient2");
const gradientBlock = document.getElementById("gradientBlock");

function gradient() {
  gradientBlock.style.background = "linear-gradient(" + inputGradient1.value + ", " + inputGradient2.value +")";
  inputGradient2.classList.remove('hid')
}
inputGradient1.onchange = gradient;
.hid {
  display: none
}
<div class="block" id="divBlock">
  <input type="color" class="inputGradient" id="inputGradient1">
  <input type="color" class="inputGradient hid" id="inputGradient2">
</div>
<div class="gradientBlock" id="gradientBlock" style="width: 100px; height: 100px;"></div>