Estoy tratando de ocultar el borde de mi estilo div porque tengo una identificación de división para colocar en ese estilo, pero el borde se muestra antes de hacer clic en el botón para ejecutar la identificación de división con un botón.
Esto es para una de mis tareas. Todo funciona bien excepto por este defecto de diseño que tengo.
Soy un completo principiante, por lo que puede parecer una pregunta tonta.
<html> <head> <title>Old MacDonald Verse</title> <script type="text/javascript"> function OldMacVerse(animal,sound) { document.getElementById('outputDiv').innerHTML= '<p>Old Macdonald had a farm, EIEIO.<br>' + 'And on that farm he had a ' + animal + ', EIEIO. <br>' + 'With a ' + sound + '-' + sound + ' here, and a ' + sound + '-' + sound + ' there, <br>' + ' here a ' + sound + ', there a ' + sound + ', everywhere a ' + sound + '-' + sound + '.<br>' + 'Old Macdonald had a farm, EIEIO.</p>'; } </script> <body> <div style= "border: solid; margin: auto; width:350px; text-align: center;"> <h1>Old MacDonald Verse</h1> <input type="button" value="Pig Verse" onclick="OldMacVerse('pig','oink');"> <input type="button" value="Sheep Verse" onclick="OldMacVerse('sheep','baa');"> <input type="button" value="Cow Verse" onclick="OldMacVerse('cow', 'moo');"> </div> <br> <div style= "border: groove; margin: auto; width: 350px; text-align: center;"> </div> <div id="outputDiv"> </div> </body> </head> </html>Puede crear una clase para su div de salida:
<style> .myclass { border: groove; } </style>Y aplique la clase dinámicamente en su función:
function OldMacVerse(animal, sound) { // ... var element = document.getElementById("outputDiv"); element.classList.add("myclass"); // ... }Y elimine el estilo del div externo.
Código completo:
<html> <head> <title>Old MacDonald Verse</title> <style> .myclass { border: groove; } </style> </head> <body> <div style="border: solid; margin: auto; width:350px; text-align: center;"> <h1>Old MacDonald Verse</h1> <input type="button" value="Pig Verse" onclick="OldMacVerse('pig','oink');"> <input type="button" value="Sheep Verse" onclick="OldMacVerse('sheep','baa');"> <input type="button" value="Cow Verse" onclick="OldMacVerse('cow', 'moo');"> </div> <br> <div style="margin: auto; width: 350px; text-align: center;"> </div> <div id="outputDiv"> </div> <script type="text/javascript"> function OldMacVerse(animal, sound) { var element = document.getElementById("outputDiv"); element.classList.add("myclass"); element.innerHTML = '<p>Old Macdonald had a farm, EIEIO.<br>' + 'And on that farm he had a ' + animal + ', EIEIO. <br>' + 'With a ' + sound + '-' + sound + ' here, and a ' + sound + '-' + sound + ' there, <br>' + ' here a ' + sound + ', there a ' + sound + ', everywhere a ' + sound + '-' + sound + '.<br>' + 'Old Macdonald had a farm, EIEIO.</p>'; } </script> </body> </html>