tengo este codigo que voy a copiar a continuacion, en el cual no puedo tocar el archivo HTML. Todo tiene que ser hecho en JS.
Quiero que cuando clickeo en el boton, imprima en el div con class="output" (Guardada en la variable let output, en el archivo JS). Las variables status y success.
Esto es lo que he hecho hasta ahora. No entiendo porque no me funciona el evento que le he asignado al boton.
Gracias.
HTML:
<body>
<form>
<select name="status"></select>
<input name="success" type="number" min=0 max=100 step=1 value="0">
<button type="submit">Submit</button>
</form>
<div class="output">Waiting for form submit...</div>
<script src="./index.js"></script>
</body>
JS:
const oppoStatus = [
{
K_OPPO_STATUS: 1,
STATUS: "1. Initial Contact",
SUCCESS: 0,
},
{
K_OPPO_STATUS: 2,
STATUS: "2. Demonstration",
SUCCESS: 25,
},
{
K_OPPO_STATUS: 3,
STATUS: "3. Proposal",
SUCCESS: 50,
},
{
K_OPPO_STATUS: 4,
STATUS: "4. Negotiation",
SUCCESS: 75,
},
{
K_OPPO_STATUS: 5,
STATUS: "5. Order",
SUCCESS: 100,
},
];
let select = document.querySelector("select");
let input = document.querySelector("input");
let output = document.getElementsByClassName("output");
let button = document.querySelector("button");
console.log(button)
function renderingContent() {
for (let i = 0; i < oppoStatus.length; i++) {
let status = oppoStatus[i].STATUS;
let success = oppoStatus[i].SUCCESS;
let opt = document.createElement("option");
select.appendChild(opt);
opt.value = success;
opt.innerHTML = status;
}
select.addEventListener("change", function () {
let optValue = select.value;
input.value = optValue;
});
button.addEventListener("click", function () {
output.textContent = select.value;
});
}
renderingContent();