JavaScript slice / substring仅在替换HTML innerText时返回未定义

Question

因此，我编写了一个简单的RGB滑块，可在html画布上显示其结果。除了slice / substring之外，所有其他功能都有效：由于某些原因，将其设置为变量或更改<span>的innerText时，它将返回undefined。

      const $ = ele => document.querySelector(ele),
      numToHex = num => parseInt(num, 10).toString('16').padStart(2, '0'),
      c = $('#canvas').getContext('2d')
      
      var rsp = $('#rspan'),
      gsp = $('#gspan'),
      bsp = $('#bspan'),
      rvalue, gvalue, bvalue
      
      $('#rrange').oninput = () => {
        rvalue = `#${numToHex($('#rrange').value).toUpperCase()}0000`
        rsp.innerText = rvalue
        rsp.style.color = rvalue
        updateCanvas()
      }
      
      $('#grange').oninput = () => {
        gvalue = `#00${numToHex($('#grange').value).toUpperCase()}00`
        gsp.innerText = gvalue
        gsp.style.color = gvalue
        updateCanvas()
      }
      
      $('#brange').oninput = () => {
        bvalue = `#0000${numToHex($('#brange').value).toUpperCase()}`
        bsp.innerText = bvalue
        bsp.style.color = bvalue
        updateCanvas()
      }
      
      function updateCanvas(rval = rvalue, gval = gvalue, bval = bvalue) {
        console.log(rval.substring(0, 3)) // This works
        let arr = [rval.substring(0, 3), gval.substring(3, 5), bval.substring(-2)]
        c.fillStyle = arr.join('') // Throws error
        c.fillRect(0, 0, 250, 250)
      }

      input {
        width: 300px;
      }

<!DOCTYPE html>
<html>
  <head>
    <title>RGB Slider</title>
  </head>
  <body>
    <canvas id="canvas" width="250" height="250"></canvas>
    <div id="rdiv">
      <input type="range" min="0" max="255" id="rrange" />
      <span id="rspan"></span>
    </div>
    <div id="gdiv">
      <input type="range" min="0" max="255" id="grange" />
      <span id="gspan"></span>
    </div>
    <div id="bdiv">
      <input type="range" min="0" max="255" id="brange" />
      <span id="bspan"></span>
    </div>
  </body>
</html>

为什么会这样？它也与slice引发相同的错误。为何它在先前的console.log语句中起作用？