根据范围滑块的值更新HTML

问题描述 投票：0回答：5

我正在尝试基于两个范围滑块的值输出HTML字符串，其中每个值0-10代表一个不同的值。

我在滑块上找到了本教程（https://www.w3schools.com/howto/howto_js_rangeslider.asp），其中包括将JavaScript输出到HTML，但似乎无法使其与我的自定义一起使用。

这是我得到的，但不会更新输出：

<input id="a" type="range" min="1" max="10" value="1" onchange="UpdateText()"><br />
<input id="b" type="range" min="1" max="10" value="10" onchange="UpdateText()"><br />
Values: <span id="text"></span>

<script>
  // change b when a is adjusted
  document.getElementById('a').addEventListener('change', function (e) {
    document.getElementById('b').value = 10 - (e.target.value - 1)
  })

  // change a when b is adjusted
  document.getElementById('b').addEventListener('change', function (e) {
    document.getElementById('a').value = 10 - (e.target.value - 1)
  })

  var slidea = document.getElementById("a");
  var slideb = document.getElementById("b");
  var output = document.getElementById("text");

  output.innerHTML = "The first value is A, the second is J."; // Display the default slider value

  // Update the current slider value (each time you drag the slider handle)
  function UpdateText() {

    switch(slidea.value) {
      case 1:
        var adisplay = "A";
        break;
      case 2:
        var adisplay = "B";
        break;
      case 3:
        var adisplay = "C";
        break;
      case 4:
        var adisplay = "D";
        break;
      case 5:
        var adisplay = "E";
        break;
      case 6:
        var adisplay = "F";
        break;
      case 7:
        var adisplay = "G";
        break;
      case 8:
        var adisplay = "H";
        break;
      case 9:
        var adisplay = "I";
        break;
      case 10:
        var adisplay = "J";
        break;
      default:
    }     

    switch(slideb.value) {
      case 1:
        var bdisplay = "A";
        break;
      case 2:
        var bdisplay = "B";
        break;
      case 3:
        var bdisplay = "C";
        break;
      case 4:
        var bdisplay = "D";
        break;
      case 5:
        var bdisplay = "E";
        break;
      case 6:
        var bdisplay = "F";
        break;
      case 7:
        var bdisplay = "G";
        break;
      case 8:
        var bdisplay = "H";
        break;
      case 9:
        var bdisplay = "I";
        break;
      case 10:
        var bdisplay = "J";
        break;
      default:
    }   

    output.innerHTML = "The first value is " + adisplay.value + ", the second is " + bdisplay.value + ".";

  } 
</script>
javascript
5个回答
2
投票

您有2个错误。1st：在每种情况下，您都应添加“”，例如]

case "1":
        var adisplay = "A";
        break;

第二：

显示结果时，应在变量中添加“值”，因为它是变量，而不是输入。正确的方法：

output.innerHTML = "The first value is " + adisplay+ ", the second is " + bdisplay+ ".";

我建议您不要在每种情况下都声明您的var。

0
投票

每次写信

var adisplay = ""

在switch语句中，您正在声明一个新变量。尝试将所有内容都清除掉，它应该可以工作。

0
投票

看看，我已经以简单的方式更改了语法。

//Get reference to sliders(A & B)
const sliderA = document.getElementById('a');
const sliderB = document.getElementById('b');
//Get reference to outputs(A & B)
const outputA = document.getElementById('outputA');
const outputB = document.getElementById('outputB');
//Store alphabets in array
const myDisplayValue = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'];

//On slider change invoke respective function
sliderA.addEventListener('change', handleSliderA);
sliderB.addEventListener('change', handleSliderB);


function handleSliderA() {
	//Get the alphabet from array based on slider value
  //Note: Array is Zero(0) based
	outputA.innerText = myDisplayValue[sliderA.value - 1];
}

function handleSliderB() {
	//Get the alphabet from array based on slider value
  //Note: Array is Zero(0) based
	outputB.innerText = myDisplayValue[sliderB.value - 1];
}
<input id="a" type="range" min="1" max="10" value="1"><br />
<input id="b" type="range" min="1" max="10" value="10"><br />
Values: The first value is <span id="outputA">A</span>, the second is <span id="outputB">J</span>
0
投票

编辑：由于@Sarai Lopez的回答，添加了第三个错误。

我在您的代码段中发现两个 三个错误。

我在示例文档中运行了您的代码，查看了控制台（查看文档时，在键盘上按F12键，然后发现此错误：

TypeError: adisplay is undefined

错误表示您未在正确的scope中声明变量”>。这意味着一旦代码退出switch语句，就无法再访问您的变量。]​​>

要解决该错误，只需：

  1. 在函数的开头声明adisplay和bdisplay，并删除分配前面的var，以防止进行重新格式化（这将导致另一个错误）。
    function UpdateText() {
    // Here
    var adisplay;
    var bdisplay;
    ...
        // Inside your switch statement - remove the "var"
        adisplay = "A";
    ...
}
    1. 我见过的另一个错误是：在Javascript中，您无需键入.value即可访问变量的值。只需使用此行即可：
    output.innerHTML = "The first value is " + adisplay + ", the second is " + bdisplay + ".";

    1. 您需要在case中的数字周围加上引号：
    switch(...) {
case "1": // Here
    ...
}

    有了这些two
three修复，它应该可以工作。

因此，UpdateText中的主要错误是输入的值是字符串而不是数字。所以我使用+slidea.value

将其转换为数字

另一个错误是，您不需要在不是具有value属性的对象的变量上使用.value。例如使用adisplay而不是adisplay.value，因为发生上述错误，该错误未定义，因此引发了错误。

[除此之外，我将UpdateText（）调用移到了addEventListener中，因为否则它们以错误的顺序运行。您需要在更新文本之前设置其他输入，否则文本总是落后于一个更新。

正如在其他地方提到的，您还应该将switch语句中的var声明移到它的外部，因为如果达到默认情况，您可能会得到未定义的变量。]​​>

var slidea = document.getElementById("a");
var slideb = document.getElementById("b");
var output = document.getElementById("text");

// change b when a is adjusted
slidea.addEventListener('change', function(e) {
  slideb.value = 10 - (e.currentTarget.value - 1)
  UpdateText();
})

// change a when b is adjusted
slideb.addEventListener('change', function(e) {
  slidea.value = 10 - (e.currentTarget.value - 1)
  UpdateText();
})


output.innerHTML = "The first value is A, the second is J.";; // Display the default slider value

// Update the current slider value (each time you drag the slider handle)
function UpdateText() {
  switch (+slidea.value) {
    case 1:
      var adisplay = "A";
      break;
    case 2:
      var adisplay = "B";
      break;
    case 3:
      var adisplay = "C";
      break;
    case 4:
      var adisplay = "D";
      break;
    case 5:
      var adisplay = "E";
      break;
    case 6:
      var adisplay = "F";
      break;
    case 7:
      var adisplay = "G";
      break;
    case 8:
      var adisplay = "H";
      break;
    case 9:
      var adisplay = "I";
      break;
    case 10:
      var adisplay = "J";
      break;
    default:
  }
  switch (+slideb.value) {
    case 1:
      var bdisplay = "A";
      break;
    case 2:
      var bdisplay = "B";
      break;
    case 3:
      var bdisplay = "C";
      break;
    case 4:
      var bdisplay = "D";
      break;
    case 5:
      var bdisplay = "E";
      break;
    case 6:
      var bdisplay = "F";
      break;
    case 7:
      var bdisplay = "G";
      break;
    case 8:
      var bdisplay = "H";
      break;
    case 9:
      var bdisplay = "I";
      break;
    case 10:
      var bdisplay = "J";
      break;
    default:
  }

  output.innerHTML = "The first value is " + adisplay + ", the second is " + bdisplay + ".";

}
<input id="a" type="range" min="1" max="10" value="1"><br />
<input id="b" type="range" min="1" max="10" value="10"><br /> Values: <span id="text"></span>
0
投票

因此，UpdateText中的主要错误是输入的值是字符串而不是数字。所以我使用+slidea.value

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.