Estoy tratando de usar HTML 'entrada' para cambiar el valor de apiData.id. Soy nuevo en javascript y no estoy seguro si esto es correcto. Cualquier sugerencia sería muy apreciada.
const apiData = { url: 'https://pokeapi.co/api/v2/', type: 'pokemon', id: '76', } const input = document.getElementById('container'); const newId = apiData.id; function eventController(event) { newId = event.target.value; } input.addEventListener('change', eventController, false); <!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>Pokemon</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <input id="input"> <input type="submit" value="Catch"> </div> <div class="pokemon"></div> <script src="main.js"></script> </body> </html>newId es constante, por lo que no puede asignarle un nuevo valor después de que se haya declarado.
Pero incluso si pudiera (y puede, al convertirlo en una variable), eso no afectaría a apiData.id , ya que a newId se le asigna el valor de apiData.id , pero no están vinculados entre sí.
Simplemente debe asignar apiData.id directamente con un nuevo valor:
const apiData = { url: 'https://pokeapi.co/api/v2/', type: 'pokemon', id: '76', } const input = document.getElementById('container'); // const newId = apiData.id; function eventController(event) { apiData.id = event.target.value; } input.addEventListener('change', eventController, false); <!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>Pokemon</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <input id="input"> <input type="submit" value="Catch"> </div> <div class="pokemon"></div> <script src="main.js"></script> </body> </html>