基于文本框字数自动移动范围滑块的Perl脚本错误修正求助

首先，你遇到的Perl报错是因为Q1_wordcount在Perl代码里是未定义的裸词（Bareword），在strict subs模式下不允许直接使用未声明的标识符。更关键的是，这个实现思路本身有问题：Perl是服务器端渲染代码，没法实时响应前端用户的输入变化，而你需要的是滑块随输入字数实时更新，应该用前端JavaScript来实现，不需要嵌入Perl脚本。

修正步骤： #

1. 移除range滑块value属性里的Perl代码，恢复静态初始值（比如value="0"）
2. 在现有的updateWordCount函数中，添加更新滑块值的逻辑：
   • 当输入字数≤50时，滑块值按比例计算：(字数 / 50) * 100（取整）
   • 当输入字数≥50时，滑块值直接设为最大值100

修正后的完整代码： #

<script>
// To count the number of words in a open end question
$(document).ready(function(){
    updateWordCount('Q1');
})
  
$(document).on('keyup', '#Q1', function(){
    updateWordCount('Q1');
})
  
function updateWordCount(Q1) {
    var matches = SSI_GetValue(Q1).match(/\S+/g);
    var count = matches ? matches.length : 0;
    $('.' + Q1 + '_wordcount').text(count);
    
    // 更新滑块值的逻辑
    const slider = document.getElementById('myRange');
    let sliderValue;
    if (count >= 50) {
        sliderValue = 100;
    } else {
        sliderValue = Math.round((count / 50) * 100);
        // 确保最小值不低于滑块的min值
        sliderValue = Math.max(sliderValue, parseInt(slider.min));
    }
    slider.value = sliderValue;
}
</script>
 
<style>
/*Slider preparation*/
.slidecontainer {
  width: 100%;
}
 
.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 25px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}
 
.slider:hover {
  opacity: 1;
}
 
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #04AA6D;
  cursor: pointer;
}
 
.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #04AA6D;
  cursor: pointer;
}
</style>
 
<div class="slidecontainer">
 <span class="Q1_wordcount"></span>
  <input type="range" min="1" max="100" class="slider" id="myRange" value="0">
 </div>

说明： #

• 去掉了无效的Perl嵌入代码，避免语法错误
• 通过JavaScript实时计算并更新滑块值，完全匹配你需要的“输入至少50字滑块到末端”的需求
• 增加了对滑块最小值的判断，确保字数为0时滑块不会低于设定的min值（1）

内容的提问来源于stack exchange，提问作者Abdul Jaleel