Question

该项目是一个.gif图像，它在CSS中使用参数left：0％：left：100％从左向右移动。最终结果是一种输入形式，其中输入文本为1-100，并且将使用滑块将一个家伙从左向右移动。

我无法理解EventListener和HTTP元素之间的这种交互，这让我发疯了！

我已经阅读了很多有关通过JS setAttribute和CSS自定义属性控制值的知识，到目前为止，只能使鼠标控件起作用。我下面有一个角色的模板的当前代码片段，这缺少一些内容，我无法解决。

var myInput = document.getElementById("charinput"); 

let root = document.documentElement;
root.addEventListener("value", myInput => {
  root.style.setProperty("--chari1-positionx", myInput);
});

window.onload = function addPlayers() {
  var charDiv = document.createElement("div")
  charDiv.setAttribute("class", "infob");
  charDiv.setAttribute("margin-top", "325px");
  document.body.appendChild(charDiv)
  var char = document.createElement("img");
  char.setAttribute("src", "assets/Char.gif");
  char.setAttribute("height", "150");
  char.setAttribute("class", "chari1");
charDiv.appendChild(char)
}

:root {
  --chari1-positionx: 0%;
}
.chari1 {
  position: absolute;
  top: 190px;
  padding: 0%;
  animation: runner 7s;
  left: var(--chari1-positionx);
}

<div class="charUpdate">
<input type="range" id="charinput" min="1" max="100">
<input type="submit" id="charinput" value="Update Position">
</div>

在此阶段之后，我将使用setItem和getItem函数来保存这些值并进行更改。现在，我想更好地了解任何给定的HTML输入和JS EventListener之间的交互。

理想的最终结果是用户输入一个介于1到100之间的数字，它会更改图像的位置并停留在该位置。此刻，我的角色从0％位置开始。更改--chari1-positionx值确实会反映在最终结果中，但是HTML输入对实时位置没有影响。

任何提示和/或资源将不胜感激！我还没有接触过JQuery，我不确定是否需要它，但是如果需要，我会深入探讨！

Answer 1

首先：您具有2个具有相同“ charinput” id的输入。在下面的代码中，我已经将它们修改为“ charinput-range”和“ charinput-submit”。

拖动范围时直接更新：

document.getElementById('charinput-range').addEventListener('input', function(e){
    document.documentElement.style.setProperty('--chari1-positionx', e.target.value + '%');
});

点击提交按钮时更新：

document.getElementById('charinput-submit').addEventListener('click', function(){
    var currentValue = document.getElementById('charinput-range').value;
    document.documentElement.style.setProperty('--chari1-positionx', currentValue + '%');
});

Answer 2

您似乎误解了addEventListener的工作方式。您不能像这样在输入元素的值中添加“观察者”。您可以做的是改为侦听元素上的input事件，然后相应地更新您的值。这也意味着您可以完全放弃“更新位置”按钮：但是，如果您希望保留它，还可以通过侦听按钮上的click事件来调用相同的逻辑以在根目录中设置CSS变量。

下面的代码假定您将“提交”输入更改为ID为update的按钮：

const myInput = document.getElementById("charinput");
const update = document.getElementById("update");

function updatePosition() {
  document.documentElement.style.setProperty("--chari1-positionx", `${+myInput.value}%`);
}

// Update position when input event is fired from your range input
myInput.addEventListener("input", updatePosition);

// Update position if user clicks on button (this is not necessary, really)
update.addEventListener("click", updatePosition);

在此处查看完整的概念验证示例：

const myInput = document.getElementById("charinput");
const update = document.getElementById("update");

function updatePosition() {
  document.documentElement.style.setProperty("--chari1-positionx", `${+myInput.value}%`);
}

// Update position when input event is fired from your range input
myInput.addEventListener("input", updatePosition);

// Update position if user clicks on button (this is not necessary, really)
update.addEventListener("click", updatePosition);

window.onload = function addPlayers() {
  var charDiv = document.createElement("div")
  charDiv.setAttribute("class", "infob");
  charDiv.setAttribute("margin-top", "325px");
  document.body.appendChild(charDiv)
  var char = document.createElement("img");
  char.setAttribute("src", "assets/Char.gif");
  char.setAttribute("height", "150");
  char.setAttribute("class", "chari1");
  charDiv.appendChild(char)
}

:root {
  --chari1-positionx: 0%;
}

.chari1 {
  position: absolute;
  top: 190px;
  padding: 0%;
  animation: runner 7s;
  left: var(--chari1-positionx);
}

<div class="charUpdate">
  <input type="range" id="charinput" min="1" max="100">
  <button type="button" id="update">Update Position</button>
</div>

如何使用HTML范围或数字输入来控制CSS属性？

2 个答案: