Хотел сделать ползунок который меняет цвет прямоугольника но почему то не вышло.В чем проблема?

Question

function borRad() {
  let val1 = document.getElementById('input1');
  let val2 = document.getElementById('text1');
  let val3 = document.getElementById('logo');

  val3.style.borderRadius = val1.value + 'px';
  val2.value = val1.value;
}

function border() {
  let val1 = document.getElementById('input2');
  let val2 = document.getElementById('text2');
  let val3 = document.getElementById('logo');

  val3.style.border = val1.value + 'px solid black';
  val2.value = val1.value;
}

function logoColor() {
  let val1 = document.getElementById('input3');
  let val2 = document.getElementById('text3');
  let val3 = document.getElementById('logo');

  if (val1.value = '0') {
    val3.style.background = "white";
  } else if (val1.value = '1') {
    val3.style.background = "blue";
  } else if (val1.value = '2') {
    val3.style.background = "red";
  } else if (val1.value = '3') {
    val3.style.background = "pink";
  } else if (val1.value = '4') {
    val3.style.background = "orange";
  } else if (val1.value = '5') {
    val3.style.background = "green";
  } else if (val1.value = '6') {
    val3.style.background = "gray";
  } else if (val1.value = '7') {
    val3.style.background = "Purple";
  } else if (val1.value = '8') {
    val3.style.background = "Olive";
  } else if (val1.value = '9') {
    val3.style.background = "Gold";
  } else if (val1.value = '10') {
    val3.style.background = "black";
  }
}

<div id="pole1">
  <p>
    <input type="range" value="0" min="0" max="30" id="input1" oninput="borRad();">
    <input type="text" value="0" id="text1"> Радиус рамки
  </p>
</div>
<div id="pole2">
  <p>
    <input type="range" value="0" min="0" max="10" id="input2" oninput="border();">
    <input type="text" value="0" id="text2"> Ширина рамки
  </p>
</div>
<div id="pole3">
  <p>
    <input type="range" value="0" min="0" max="10" id="input3" oninput="logoColor();">
    <input type="text" value="0" id="text3"> Цвет логотипа
  </p>
</div>
<div id="logo"></div>

Answer 1

const colors = ['blue', 'red', 'pink', 'orange', 'green', 'gray', 'purple', 'olive', 'gold', 'black'];

const logo = document.querySelector('#logo');

const radiusInput = document.querySelector('.radius-input');
const widthInput = document.querySelector('.width-input');
const colorInput = document.querySelector('.color-input');

const radiusOutput = document.querySelector('.radius-output');
const widthOutput = document.querySelector('.width-output');
const colorOutput = document.querySelector('.color-output');

colorInput.setAttribute('max', colors.length - 1);
let selectedColor = colors[0];

radiusInput.oninput = function() {
    radiusOutput.value = this.value;
    logo.style.borderRadius = `${this.value}px`;
}

widthInput.oninput = function() {
    widthOutput.value = this.value;
    logo.style.borderWidth = `${this.value}px`;
    logo.style.borderStyle = 'solid';
    logo.style.borderColor = selectedColor;
}

colorInput.oninput = function() {
    colorOutput.value = this.value;
    selectedColor = colors[this.value] || 'black';
    logo.style.borderColor = selectedColor;
}

<div>
    <p>
        <input type="range" value="0" min="0" max="30" class="radius-input">
        <input type="text" value="0" class="radius-output" readonly> Радиус рамки
    </p>
</div>
<div>
    <p>
        <input type="range" value="0" min="0" max="100" class="width-input">
        <input type="text" value="0" class="width-output" readonly> Ширина рамки
    </p>
</div>
<div>
    <p>
        <input type="range" value="0" min="0" max="10" class="color-input">
        <input type="text" value="0" class="color-output" readonly> Цвет логотипа
    </p>
</div>
<div id="logo"></div>

БЛОГ НА HUSL

Хотел сделать ползунок который меняет цвет прямоугольника но почему то не вышло.В чем проблема?

Ответы (1 шт):