Acabo de terminar un borrador para un proyecto que estoy realizando y al momento de ejecutarlo no me salen las alertas de la función a pesar de que si me la detecta si pongo una alerta para que me muestre la variable.
Se basa en que tengo un rol de una empresa por lo que si ese rol es admitido me proporcione una alerta verificándolo, por lo que ahí falla a pesar de que coloque (en este caso la variable se llama cargo)
alert=(cargo)
Y me proporcione la alerta con el cargo respectivo al ejecutar la función la alerta no se ejecuta y no entiendo por que
function validacion() {
let cargo = document.getElementById('cargo').value
if (cargo == 'ingeniero') {
alert(" eres " + cargo)
} else {
if (cargo == 'jefe de planta') {
alert(" eres " + cargo)
} else {
if (cargo == 'administrador') {
alert(
" eres " + cargo)
} else {
if (cargo == 'secretario') {
alert(" eres " + cargo)
} else {
alert("No se ha proporcionado un cargo valido")
}
}
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Empresa.inc</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</head>
<body class="body">
<div class="container m-3">
<div class="row">
<div class="col-sm-9 col-xl-9">
<div class="card">
<div class="card-header">
<p class="titulo">Acceso
<a href=""></a> la plataforma</p>
</div>
<div class="card-body">
<select class="form-select" id="cargo">
<option selected>Cargo</option>
<option value="ingeniero">Ingeniero</option>
<option value="jefe de planta">Jefe de Planta</option>
<option value="administrador">Administrador</option>
<option value="secreterio">Secretario</option>
</select>
</div>
<td><button type="submit" class="btn btn-primary" id="validacion" onclick="validacion()" value="Ingresar">Ingresar</button></td>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</html>