Блог

Главная - Вопросы по программированию - HTML / JS — заблокируйте одну кнопку другой кнопкой и сбросьте ее с помощью другой кнопки

HTML / JS — заблокируйте одну кнопку другой кнопкой и сбросьте ее с помощью другой кнопки

#javascript #html #button

#javascript #HTML #кнопка

Вопрос:

 <body>
<script>
MQTTconnect();

var clicked_f = 0;
var clicked_b = 0;

if (clicked_f > 0) {
    document.getElementById("backw_button").disabled = true;
    alert("BACKWARD button is disabled.");
}
if (clicked_b > 0) {
    document.getElementById("fwr_button").disabled = true;
    alert("FORWARD button is disabled.");
}
if (document.getElementById("stop_b").clicked == true) {
    clicked_f = 0;
    clicked_b = 0;
}
else{
    document.getElementById("backw_button").disabled = false;
    document.getElementById("fwr_button").disabled = false;
}

function c_for() 
{
    message = new Paho.MQTT.Message("1");
    message.destinationName = "train/direction";
    mqtt.send(message);
}
function forw() 
{   
    mqtt = new Paho.MQTT.Client(host,port,"clientjs");
    var options = {
        timeout: 3,
        onSuccess: c_for,
        };   
    mqtt.connect(options);
}

function c_back() 
{
    message = new Paho.MQTT.Message("2");
    message.destinationName = "train/direction";
    mqtt.send(message);
}
function forw() 
{
    mqtt = new Paho.MQTT.Client(host,port,"clientjs");
    var options = {
        timeout: 3,
        onSuccess: c_for,
        };   
    mqtt.connect(options);
}

function MQTTconnect() 
{
console.log("connecting to "  host  " "  port);
mqtt = new Paho.MQTT.Client(host,port,"clientjs");
var options = {
    timeout: 3,
    onSuccess: onConnect,
    };
     
mqtt.connect(options);
}

</script>

<div class="inputik" style="width: 290px;padding: 20px ">
        <h3>Direction:</h3>
        <button id="fwr_button" onclick="clicked_f  ;forw();" style="background-color: #009600">FORWARD</button>
        <button id="stop_b" onclick="vyp()" style="background-color: #990000">STOP</button>
        <button id="backw_button" onclick="clicked_b  ;backw();" style="background-color: #2247ff">BACKWARD</button>
</div><br>

Вы не можете нажимать кнопки ВПЕРЕД и НАЗАД по порядку, вы должны нажимать кнопку ОСТАНОВКИ между ними. Мне просто нужно отключить одну кнопку другой кнопкой и наоборот, и с помощью кнопки ОСТАНОВКИ включить их оба. MQTT не имеет значения, мне просто нужно отключить одну кнопку одновременно, чтобы не отправлять сообщения. Я просто не знаю, в чем ошибка

Комментарии:

1. Я не вижу вашей MQTTconnect() и любой onclick функции. Можете ли вы добавить это в свой вопрос?

2. Да, я это сделал, я отредактировал его

Ответ №1:

Вы никогда не обновляете disabled -state кнопок после первой загрузки. Вы только обновляете поля clicked_f и clicked_b , но это не приведет к повторному выполнению скрипта.

Я считаю, что ваша проблема станет намного проще, если вы просто будете отслеживать position , к чему вы перемещаетесь или от чего. И если вы обновите отключенное состояние ваших кнопок, используя это position .

Вот так:

 let position = 0;

function forwardButtonClicked() {
  // Note: call your MQTT function here
  position  ;
  updateButtons();
}

function stopButtonClicked() {
  position = 0;
  updateButtons();
}

function backwardButtonClicked() {
  // Note: call your MQTT function here
  position--;
  updateButtons();
}

function updateButtons() {
  console.log(position); // Only here for demonstration
  document.getElementById("backward_button").disabled = position > 0;
  document.getElementById("forward_button").disabled = position < 0;
} 
 <button id="forward_button" onclick="forwardButtonClicked()">FORWARD</button>
<button onclick="stopButtonClicked()">STOP</button>
<button id="backward_button" onclick="backwardButtonClicked()">BACKWARD</button>