如何在执行输出之前不显示边界线？

Question

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.我试图隐藏我的 div 样式的边框，因为我有一个 div id 要放在那个样式中，但是在我单击按钮以通过按钮执行 div id 之前显示了边框。

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, 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>

Answer 1

You can create a class for your output div:您可以为输出 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.并从外部 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>

如何在执行输出之前不显示边界线？

问题描述

1 个解决方案

解决方案1
0 2021-10-28 00:35:24

如何在执行输出之前不显示边界线？

问题描述

1 个解决方案

解决方案1 0 2021-10-28 00:35:24

解决方案1
0 2021-10-28 00:35:24