I am trying to hide the border of my div style because I have a div id to be put in that style but the border is showing before I click the button to execute the div id by a button.
This is for one of my assignments. Everything works fine other than this design flaw I have.
I am a complete beginner so may seem like a dumb question.
<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, E-I-E-I-O.<br>' +
'And on that farm he had a ' + animal + ', E-I-E-I-O. <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, E-I-E-I-O.</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>You can create a class for your output div:
<style>
.myclass {
border: groove;
}
</style>
And apply the class dynamically in your function:
function OldMacVerse(animal, sound) {
// ...
var element = document.getElementById("outputDiv");
element.classList.add("myclass");
// ...
}
And remove the style from the external div.
Complete code:
<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, E-I-E-I-O.<br>' +
'And on that farm he had a ' + animal + ', E-I-E-I-O. <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, E-I-E-I-O.</p>';
}
</script>
</body>
</html>