Duvida

HTML

<!DOCTYPE html>
<html>
<head>
	<title>Teste</title>
	<style type="text/css">
		ul{
			list-style-type: none;
		}	

	</style>
</head>
<body>
	<form>
		<input type="number" name="num_1" id="num_1">Numero 1<br>
		<input type="number" name="num_2" id="num_2">Numero 2<br>
		<input type="number" name="num_3" id="num_3">Numero 3<br>
		<button id="submit">Send</button>
	</form>
	<ul class="lista_numeros">
		<li class="numero_1">Maior</li><br>
		<li class="numero_2">Meio</li><br>
		<li class="numero_3">Menor</li>
	</ul>

		<script type="text/javascript" src="javascript.js"></script>
</body>
</html>

JavaScript

const num_1 = document.querySelector("#num_1");
const num_2 = document.querySelector("#num_2");
const num_3 = document.querySelector("#num_3");
const submit = document.querySelector("#submit");

const li_1 = document.querySelector(".numero_1");
const li_2 = document.querySelector(".numero_2");
const li_3 = document.querySelector(".numero_3");


let maior = 0;
let meio = 0;
let menor = 0;
let a = 0;
let b= 0;
let c= 0;

submit.addEventListener("click", function(event) {
	event.preventDefault();
	a = num_1.value;
	b = num_2.value;
	c = num_3.value;

	


	
	if(a > b && a > c){
		alert("Aconteceu A")
		maior = a;
		if(c > b){
			console.log("C > B " + maior);
			meio = c;
			menor = b;
		}
		else{
			console.log("B > C " + maior);
			meio = b;
			menor = c;
		}
	}
	if(b > a && b > c){
		alert("Aconteceu B")
		maior = b;
		if(a > c){
			console.log("A > C " + maior);
			meio = a;
			menor = c;
		}
		else{
			console.log("C > A " + maior);
			meio = c;
			menor = a;
		}
	}
	if(c > a && c > b){
		alert("Aconteceu C");
		maior = c;
		if(b > a){
			console.log("B > A " + maior);
			meio = b;
			menor = a;
		}
		else{
			console.log("A > B " + maior);
			meio = a;
			menor = b;
		}
	}


	li_1.textContent = maior;
	li_2.textContent = meio;
	li_3.textContent = menor;

console.log(a + " debug");
	
	
})