Question

我试图从滑块用户输入中获取时间以设置端口的脉冲时间，但是我的函数在运行时显示“ null”值。

我正在使用一个表单来提交与端口1链接的用户输入时间，因此当打开端口1时它将一直运行到使用滑块设置的时间。 JavaScript：

var slider = document.getElementById("pulse_time_1");
    var output = document.getElementById("P1_PT");
    output.innerHTML = slider.value;

    slider.oninput = function Port1_pulsetime(){
        if(connected_flag==1){
            client.subscribe("lazy/test");
            message = new Paho.MQTT.Message("PULSE 1" + document.getElementById("pulse_time_1").value);
            message.destinationName = "lazy/test";
            client.send(message);
            }
            else {
                console.log("not connected")
            }
        return false;   
    }

html代码：

<tr height=40>
        <td><style="text-align:middle">PORT1</td>
        <td width=40></td>
        <td><label id="sw1", class="switch">
            <input type="checkbox">
            <span class="slider"></span> 
            </label>
        </td>
    </tr>

    <tr height=40>
        <td><style="text-align:middle">PORT1 PULSE TIME</td>
        <td width=40></td>
        <form id="P1_pulsetime" onsubmit="">
        <div class="slidercontainer">
        <input type="range" min="10" max="120" value="20" class="slider" id="pulse_time_1">
        <p>Time:<span id="P1_PT"></span></p>
        </div>
        </td>
        <br><br>
        <input type="button" onclick="Port1_pulsetime" value="P1_pulsetime">
        </form>
    </tr>

显示的错误：

Uncaught TypeError: Cannot read property 'value' of null    at file:///C:/Users/Apple/Downloads/Trial_success%2020_6_18%20mandeep%20(1).html:322:28

here is the image of output window

Answer 1

JavaScript无法读取您创建的内容的值。调试代码，并确保文档中存在您的值。

var temp,
pulseTime = document.getElementById("pulse_time_1");
if (pulseTime != null) {
    temp= pulseTime.value;
}
else {
    temp = null;
}

Answer 2

假设您的功能正确。主要是这些部分，这些部分对我不起作用，但可能对您有用？

if(connected_flag==1){-在任何地方都没有定义 connected_flag ，因此您可能丢失，忽略或提供了不完整的代码。

client.subscribe("lazy/test");- client 不是本机JavaScript函数。您正在使用图书馆吗？

Paho.MQTT.Message()-这也不是本机JavaScript。再次使用图书馆吗？

message.destinationName-消息不是本机JavaScript函数。

client.send()-同样， client 不是本机JavaScript函数。

但是，如果我假设所有这些都是可供您使用的函数，并且它们实际上并不会引起任何问题，并且您可以执行条件，尽管 connected_flag 不能在您的问题中定义后，以下方法应该起作用：

<table>
    <tr height=40>
        <td><style="text-align:middle">PORT1 PULSE TIME</td>
        <td width=40></td>
        <form id="P1_pulsetime" onsubmit="">
            <div class="slidercontainer">
                <input type="range" min="10" max="120" value="20" class="slider" id="pulse_time_1" oninput="Port1_pulsetime();">
                <p>Time:<span id="P1_PT"></span></p>
            </div>
            <br><br>
            <input type="button" onclick="Port1_pulsetime();" value="P1_pulsetime">
        </form>
    </tr>

    <tr height=40>
        <td><style="text-align:middle">PORT2</td>
        <td width=40></td>
        <td><label id="sw2", class="switch">
            <input type="checkbox">
            <span class="slider"></span> 
            </label>
        </td>
    </tr>
</table>
<script>    
    var slider = document.getElementById("pulse_time_1").value;
    console.log(slider);
    var output = document.getElementById("P1_PT");
    output.innerHTML = slider.value;

    function Port1_pulsetime(){
        if(connected_flag==1){
            client.subscribe("lazy/test");
            message = new Paho.MQTT.Message("PULSE 1" + document.getElementById("pulse_time_1").value);
            message.destinationName = "lazy/test";
            client.send(message);
            }
            else {
                console.log("not connected")
            }
        return false;
    }
</script>

您的问题是，与HTML一样，JavaScript是由浏览器的编译器自上而下读取的，因此我只是稍微移动了一下。现在至少可以正确检索该值，这是您的问题中描述的问题。我还将oninput直接添加到您的元素中，这是正确的语法。

将数据从滑块获取到JavaScript函数

2 个答案: