Skip to main content
Cambiado por snippet
Origen Enlace
masterguru
  • 16k
  • 5
  • 15
  • 28

tengoTengo este codigocódigo 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 botonbotón, imprima en el divdiv con class="output"class="output" (Guardada en la variable let outputlet output, en el archivo JS). Las las variables statusstatus y successsuccess.

Esto es lo que he hecho hasta ahora. No entiendo porque no me funciona el evento que le he asignado al boton.

Graciasbotón.

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();
<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>
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();
 

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();

Tengo este código 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 botón, 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 botón.

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();
<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>
 

Origen Enlace

submit form e imprimir texto en el browser

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();