时间戳

首页 > 解决方案 > 以 Html 形式连接用户输入并为其分配一个 ID，以便在 JavaScript 中提交

javascript - 以 Html 形式连接用户输入并为其分配一个 ID，以便在 JavaScript 中提交

问题描述

每个人我都是 JavaScript 和 Html 的新手，我正在尝试以 html 形式连接用户输入并提供 ID 并提交，以便向我的控制器发出命令以采取相应的行动。

这基本上是为端口 1 设置时间表，命令类似于 [NORMAL 122(STARTTIMESTOPTIME DAYSESSION)我还没有包含会话。

function Port1_sch_On_off(){
        if(connected_flag==1){
            client.subscribe("lazy/test");
            message = new Paho.MQTT.Message("NORMAL 122 + document.getElementById('port1_timeday'.value)");
            message.destinationName = "lazy/test";
            client.send(message);
            }
            else {
                console.log("not connected")
            }
        return false;   
    }

<tr height=40>
        <td><style="text-align:middle">PORT1_SCH_ON_OFF</td>
        <td width=40></td>
        <td><form id="port1_timeday" oninput="port1_timeday.value = start_time.valueAsNumber start_day.valueAsNumber stop_time.valueAsNumber stop_day ">
            <input name="start_time" id="start_time" type="time" min="00:00" max="24:00" required/> 
            <span class="hours"></span> 
            <label for="start_day">Day:</label> 
            <select name="start_day" id="start_day"> 
                <option value="1">MON</option>
                <option value="2">TUES</option>
                <option value="3">WED</option>
                <option value="4">THRUS</option>
                <option value="5">FRI</option>
                <option value="6">SAT</option>
                <option value="0">SUN</option>
            </select>           
            </label>
            <input name="stop_time" id="stop_time" type="time" min="00:00" max="24:00" required/> 
            <label for="stop_day">Day:</label> 
            <select name="stop_day" id="stop_day"> 
                <option value="1">MON</option>
                <option value="2">TUES</option>
                <option value="3">WED</option>
                <option value="4">THRUS</option>
                <option value="5">FRI</option>
                <option value="6">SAT</option>
                <option value="0">SUN</option>
            </select>
            </label>
            <output name="port1_timeday" for="start_time start_day stop_time stop_day"></output></td>
            <input type="button" onclick="Port1_sch_On_off()" value="Port1_timeday">
            </form>
    </tr>
    </table>

而且我还必须为我还没有开始使用的相同添加事件监听器。

标签： javascripthtmlmqtt

解决方案

以下是在 javascript 中连接的两种主要方法：

使用 + 运算符：

message = new Paho.MQTT.Message("NORMAL 122 " + document.getElementById('port1_timeday'.value));

或者

使用字符串插值：

message = new Paho.MQTT.Message(`NORMAL 122 + ${document.getElementById('port1_timeday'.value)}`);

我希望这能回答你的问题：D

编辑1：

此函数将返回您的用户输入，可以连接为“STARTDAYSTARTTIMESTOPTIMESTOPDAY”，您可以修改它以按任何顺序返回值：

function cancat_day_time() {
    start_time = document.getElementById("start_time").value;
    start_day = document.getElementById("start_day").value;
    stop_time = document.getElementById("stop_time").value;
    stop_day = document.getElementById("stop_day").value;

    return `${start_day}${start_time}${stop_day}${stop_time}`; 
}

然后，您可以在函数 Port1_sch_On_off() 中使用它，如下所示：

function Port1_sch_On_off() {
    if (connected_flag == 1) {
        client.subscribe("lazy/test");
        message = new Paho.MQTT.Message("NORMAL 122 " + cancat_day_time());
        message.destinationName = "lazy/test";
        client.send(message);
    } else {
        console.log("not connected")
    }
    return false;
}

编辑 2：

这是适用于我的 HTML 代码：

<tr height=40>
    <td></td>
    <td width=40></td>
    <td>
        <form id="port1_timeday" oninput="">
            <input name="start_time" id="start_time" type="time" min="00:00" max="24:00" required/>
            <span class="hours"></span>
            <label for="start_day">Day:</label>
            <select name="start_day" id="start_day">
                <option value="1">MON</option>
                <option value="2">TUES</option>
                <option value="3">WED</option>
                <option value="4">THRUS</option>
                <option value="5">FRI</option>
                <option value="6">SAT</option>
                <option value="0">SUN</option>
            </select>
            </label>
            <input name="stop_time" id="stop_time" type="time" min="00:00" max="24:00" required/>
            <label for="stop_day">Day:</label>
            <select name="stop_day" id="stop_day">
                <option value="1">MON</option>
                <option value="2">TUES</option>
                <option value="3">WED</option>
                <option value="4">THRUS</option>
                <option value="5">FRI</option>
                <option value="6">SAT</option>
                <option value="0">SUN</option>
            </select>
            </label>
    </td>
    <input type="button" onclick="Port1_sch_On_off()" value="Port1_timeday">
    </form>
</tr>

推荐阅读