html 我如何从addEventEvent返回一个值以便被另一个对象使用

lx0bsm1f 于 2023-11-15 发布在其他

关注(0)|答案(3)|浏览(136)

我想做的是三个滑块，可以在div改变时改变颜色。每个滑块都可以，我可以在控制台中检查值的变化。我遇到的挑战是，当我试图在事件列表之外分配值时，它不会改变任何东西。
下面是该项目的简单代码：

var redslider = document.getElementById('r')
var greenslider = document.getElementById('g')
var blueslider = document.getElementById('b')

//the above will take slider and have them as variables
const changebg = document.getElementById('rangeValue')

var red = ''
var green = ''
var blue = ''


redslider.addEventListener('input', (e) => {
  console.log(`the value of red is ${redslider.value}`)
  // redslider.value = red

})
greenslider.addEventListener('input', (e) => {
  console.log(`the value of green is ${greenslider.value}`)
  // greenslider.value = green
})
blueslider.addEventListener('input', (e) => {
  console.log(`the value of blue is ${blueslider.value}`)
  // blueslider.value = blue
})

changebg.style.backgroundColor = `rgb(${red}, ${green}, ${blue})`;

body {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.maincontainer {
  width: 50%;
  height: 50%;
  border-radius: 20px;
  background: hsla(22, 100%, 78%, 1);
  background: linear-gradient(90deg, hsla(22, 100%, 78%, 1) 0%, hsla(19, 95%, 76%, 1) 13%, hsla(17, 94%, 75%, 1) 32%, hsla(2, 78%, 62%, 1) 100%);
  background: -moz-linear-gradient(90deg, hsla(22, 100%, 78%, 1) 0%, hsla(19, 95%, 76%, 1) 13%, hsla(17, 94%, 75%, 1) 32%, hsla(2, 78%, 62%, 1) 100%);
  background: -webkit-linear-gradient(90deg, hsla(22, 100%, 78%, 1) 0%, hsla(19, 95%, 76%, 1) 13%, hsla(17, 94%, 75%, 1) 32%, hsla(2, 78%, 62%, 1) 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 20px;
}

.slider {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  width: 70%;
  height: 50px;
  background: white;
}

.slider input {
  width: 90%;
}

.valuee {
  position: absolute;
  width: 200px;
  height: 200px;
  top: 40px;
  left: 50px;
  /* background-color: rgba(43, 46, 43,0.5); */
  border: 2px solid black;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="maincontainer">
  <div class="slider">
    <input type="range" min="0" max="255" value="50" id="r">
    <!-- <p id="rangeValue">100</p> -->

  </div>
  <div class="slider">
    <input type="range" min="0" max="255" value="50" id="g">
    <!-- <p id="rangeValue">100</p> -->

  </div>
  <div class="slider">
    <input type="range" min="0" max="255" value="50" id="b">
    <!-- <p id="rangeValue">100</p> -->

  </div>
  <div class="valuee" id="rangeValue">100</div>
</div>

正如你可以从上面看到我把红色，蓝色和绿色变量为空，因为我想他们改变时，滑块输入改变.然后我给变量的值，例如blueslider.value = blue它不工作，滑块甚至拒绝改变后，最初的幻灯片.我希望帮助理解所有这些.谢谢.
这里是fiddle

Html

来源：https://stackoverflow.com/questions/77439537/how-do-i-return-a-value-from-addeventlistener-so-as-to-be-used-by-another-object

3条答案

按热度按时间

fkvaft9z1#

当你修复了移动这些指针时-JS中有一个问题。
我创建了一个函数，它将更新背景颜色和valueediv中的文本

var redslider = document.getElementById('r')
var greenslider = document.getElementById('g')
var blueslider = document.getElementById('b')
const changebg = document.getElementById('rangeValue');

//getting values from sliders set by default
var red = redslider.value;
var green = greenslider.value;
var blue = blueslider.value;

function updateValueElement() {
    changebg.style.backgroundColor = `rgb(${red}, ${green}, ${blue})`;
    changebg.textContent = `${red}, ${green}, ${blue}`;
}

redslider.addEventListener('input',(e)=>{
    console.log(`the value of red is ${redslider.value}`);
    red = redslider.value;
    updateValueElement();
})
greenslider.addEventListener('input',(e)=>{
    console.log(`the value of green is ${greenslider.value}`)
    green = greenslider.value;
    updateValueElement();
})
blueslider.addEventListener('input',(e)=>{
    console.log(`the value of blue is ${blueslider.value}`)
    blue = blueslider.value;
    updateValueElement();
})

//changing text in valuee div and its background on load
updateValueElement();

字符串

赞(0）回复(0）举报 2023-11-15

pbpqsu0x2#

你不会从事件监听器中返回一个值。没有任何东西需要这个值，也没有任何东西会使用这个值。
听起来你想做的是在事件侦听器中更改元素的backgroundColor。请注意你是如何在事件侦听器之外做的：

blueslider.addEventListener('input',(e)=>{
  console.log(`the value of blue is ${blueslider.value}`)
  // blueslider.value = blue
})

changebg.style.backgroundColor = `rgb(${red}, ${green}, ${blue})`;

字符串
如果你想在事件侦听器中执行此操作，你可以：

blueslider.addEventListener('input',(e)=>{
  console.log(`the value of blue is ${blueslider.value}`);
  // blueslider.value = blue;
  changebg.style.backgroundColor = `rgb(${red}, ${green}, ${blue})`;
});

changebg.style.backgroundColor = `rgb(${red}, ${green}, ${blue})`;

型
您可能还希望在使用变量之前更新它们，例如：

blueslider.addEventListener('input',(e)=>{
  console.log(`the value of blue is ${blueslider.value}`);
  blue = blueslider.value; // here
  changebg.style.backgroundColor = `rgb(${red}, ${green}, ${blue})`;
});

型
将这些变量初始化为非空值（与输入中的值相同）可能也是一个好主意，因此backgroundColor的初始设置是有效的：

var red = '50';
var green ='50';
var blue = '50';

型

赞(0）回复(0）举报 2023-11-15

beq87vna3#

所以我想你应该在每次触发事件时更新背景颜色（blueslider，redslider或greenslider），所以首先你需要更新全局变量red，蓝色和绿色，每次事件触发到滑块的值时，您将从输入中获取，然后创建一个新函数来更新changebg.style.backgroundColor = rgb(${red}, ${green}, ${blue})此值，并在每次触发任何相应事件时调用该函数。
例如``
`

blueslider.addEventListener('input',(e)=>{
     console.log(`the value of blue is ${blueslider.value}`);
     blue = blueslider.value;
     //our new function
     change_background();
});

change_background(){
     changebg.style.backgroundColor = `rgb(${red}, ${green}, ${blue})`;
}

`个

赞(0）回复(0）举报 2023-11-15

我来回答

html 我如何从addEventEvent返回一个值以便被另一个对象使用

3条答案

相关问题

热门标签

最新问答