Как отобразить каждый шаг функции рекурсии в js? - PullRequest
Новая
       8

Как отобразить каждый шаг функции рекурсии в js?

0 голосов
/ 21 сентября 2018

У меня есть функция рекурсии.И иметь три div в HTML как мониторы (slot_a, slot_b, slot_c).Алгоритм похож на Ханойская башня.Поэтому на каждом мониторе я хочу видеть, что происходит в каждом слоте.Для этого я использую innerHTML.Но я могу получить только один и тот же текст в каждом слоте.Что делать, чтобы они отличались? 

const moveCranes = function(plate, slot_a, slot_b, slot_c) {
    moveCranes(plate - 1, slot_a, slot_c, slot_b);
    port_a.innerHTML = "Moving plate " + plate + " from " + slot_a + " to " + slot_c + "..." + "</br>";
    port_b.innerHTML = "Moving plate " + plate + " from " + slot_a + " to " + slot_c + "..." + "</br>";
    port_c.innerHTML = "Moving plate " + plate + " from " + slot_a + " to " + slot_c + "..." + "</br>";
    moveCranes(plate - 1, slot_b, slot_a, slot_c);
}
}
moveCranes(input.value,"slot_a","slot_b","slot_c");

1 Ответ

0 голосов
/ 21 сентября 2018

Попробуйте: 

port_a = document.getElementById("port_a");
step = 1;
$row = $("<div class='row'>"+
          "<div class='col-xs-3 plate'><p>Plate</p></div>"+
          "<div class='col-xs-3 a'><p>A</p></div>"+
          "<div class='col-xs-3 b'><p>B</p></div>"+
          "<div class='col-xs-3 c'><p>C</p></div>"+
          +"</div>");
$container = $("#container");
const moveCranes = function(plate, slot_from, slot_to, slot_aux) {
	if(plate == 1){
        let $temp = $row.clone();
        $temp.find('.plate').append("<h1>"+plate+"</h1>");
        $temp.find('.'+slot_from).append("<h1>-</h1>");
        $temp.find('.'+slot_to).append("<h1>+</h1>");
        $container.append($temp);
        port_a.innerHTML += step++ + ". Moving plate " + plate + " from " + slot_from + " to " + slot_to + "..." + "</br>";
  }
  else{
        moveCranes(plate - 1, slot_from, slot_aux, slot_to);
        let $temp = $row.clone();
        $temp.find('.plate').append("<h1>"+plate+"</h1>");
        $temp.find('.'+slot_from).append("<h1>-</h1>");
        $temp.find('.'+slot_to).append("<h1>+</h1>");
        $container.append($temp);
        port_a.innerHTML += step++ + ". Moving plate " + plate + " from " + slot_from + " to " + slot_to + "..." + "</br>";
        moveCranes(plate - 1, slot_aux, slot_to, slot_from);
    }
}

moveCranes(3,"a","b","c");
.row{
  border: 1px solid black;
  margin-bottom: 10px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container" id="container">
  
</div>

<div id="port_a"></div>
...