Quiero obtener valor de una función a otra función. pero soy nuevo en javascript, ¿alguien puede ayudarme a resolver esto? Quiero llamar al valor de dinoRight, dinoLeft y el otro a la función cactus1move.
const spawn = () => { const dinoRight = document.getElementById('dino').getBoundingClientRect().left + document.getElementById('dino').getBoundingClientRect().width; const dinoLeft = document.getElementById('dino').getBoundingClientRect().left; const dinoHeight = document.getElementById('dino').getBoundingClientRect().height; const cactusTop = document.getElementById('cactus').getBoundingClientRect().top; const cactusWidth = document.getElementById('cactus').getBoundingClientRect().width; const containerLeft = document.getElementById('Container').getBoundingClientRect().left; cactus1move(); } const cactus1move = setInterval(()=>{ if (cactusTop<=dinoBottom&&dinoRight>=cactusLeft&&cactusRight>=dinoLeft) { ... } else if (cactusLeft<=containerLeft+10&&cactusLeft>=containerLeft){ ... } else { ... } },20)const spawn = () => { const dinoRight = document.getElementById('dino').getBoundingClientRect().left + document.getElementById('dino').getBoundingClientRect().width; const dinoLeft = document.getElementById('dino').getBoundingClientRect().left; const dinoHeight = document.getElementById('dino').getBoundingClientRect().height; const cactusTop = document.getElementById('cactus').getBoundingClientRect().top; const cactusWidth = document.getElementById('cactus').getBoundingClientRect().width; const containerLeft = document.getElementById('Container').getBoundingClientRect().left; cactus1move(dinoRight, dinoLeft); } //not sure if you can pass it directly to the interval const cactus1move = setInterval((dino_right, dino_left)=>{ if (cactusTop<=dinoBottom&&dinoRight>=cactusLeft&&cactusRight>=dinoLeft) { ... } else if (cactusLeft<=containerLeft+10&&cactusLeft>=containerLeft){ ... } else { ... } },20) //if it does not work you can pass the parameters to a function and then down to the interval const cactus2move = (dino_right, dino_left)=> { setInterval((dino_right, dino_left)=>{ if (cactusTop<=dinoBottom&&dinoRight>=cactusLeft&&cactusRight>=dinoLeft) { ... } else if (cactusLeft<=containerLeft+10&&cactusLeft>=containerLeft){ ... } else { ... } },20)}En su código, las variables se declaran dentro de las funciones (es decir, el alcance de estas variables está restringido a la función). Puede declarar estas variables fuera de las funciones para que ambas funciones tengan acceso a ellas. Su código será algo como:
let dinoRight, dinoLeft, dinoHeight, cactusTop, cactusWidth, containerLeft; const spawn = () => { dinoRight = document.getElementById('dino').getBoundingClientRect().left + document.getElementById('dino').getBoundingClientRect().width; dinoLeft = document.getElementById('dino').getBoundingClientRect().left; dinoHeight = document.getElementById('dino').getBoundingClientRect().height; cactusTop = document.getElementById('cactus').getBoundingClientRect().top; cactusWidth = document.getElementById('cactus').getBoundingClientRect().width; containerLeft = document.getElementById('Container').getBoundingClientRect().left; cactus1move(); } const cactus1move = setInterval(()=>{ if (cactusTop<=dinoBottom&&dinoRight>=cactusLeft&&cactusRight>=dinoLeft) { ... } else if (cactusLeft<=containerLeft+10&&cactusLeft>=containerLeft){ ... } else { ... } },20)Puede pasar parámetros al llamar al método, para que pueda usarse dentro del método. Si no es necesario, recomiendo no usar variables globales para obtener el valor.
En el siguiente código, llamo a cactus1move pasando el valor y envuelvo el valor en un objeto . Cuando se implementa dentro de cactus1move , uso la asignación de desestructuración para obtener el valor del objeto, y luego puedes usar estos valores para hacer algo.
const spawn = () => { const dinoRight = document.getElementById('dino').getBoundingClientRect().left + document.getElementById('dino').getBoundingClientRect().width; const dinoLeft = document.getElementById('dino').getBoundingClientRect().left; const dinoHeight = document.getElementById('dino').getBoundingClientRect().height; const cactusTop = document.getElementById('cactus').getBoundingClientRect().top; const cactusWidth = document.getElementById('cactus').getBoundingClientRect().width; const containerLeft = document.getElementById('Container').getBoundingClientRect().left; cactus1move({ dinoRight, dinoLeft, dinoHeight, cactusTop, cactusWidth, containerLeft }); } const cactus1move = (data) => { return setInterval(() => { const { dinoRight, dinoLeft, dinoHeight, cactusTop, cactusWidth, containerLeft } = data; console.log('dinoRight', dinoRight); console.log('dinoLeft', dinoLeft); console.log('dinoHeight', dinoHeight); console.log('cactusTop', cactusTop); console.log('cactusWidth', cactusWidth); console.log('containerLeft', containerLeft); }, 2000); } #dino { width: 80px; height: 80px; background-color: #FFBB73; float: left; } #cactus { width: 90px; height: 90px; background-color: #FFBB33; float: left; } #Container { width: 100px; height: 100px; background-color: #FFBB13; float: left; } <div id='dino'></div> <div id='cactus'></div> <div id='Container'></div> <button onclick="spawn()">spawn</button>