When I use style="display:none" on an audio element inside my code it removes the whole page instead of just making the audio element invisible. I tried with style="visibility:hidden" but it still does the exact same thing. No compilation errors occur. Can anyone explain to me why this happens and how to fix this? Here is my code down below:
return (
<div className="App">
<div id="drum-machine" style={drummachinestyle}>
<div id="display" style={displaystyle}></div>
<div id="buttons" style={buttonsstyle}>
<button id="kick1" class="drum-pad" style={drumpadstyle} onClick={this.handleQ}>
Q
</button>
<button id="kick2" class="drum-pad" style={drumpadstyle} onClick={this.handleW}>
W
</button>
<button id="openhi" class="drum-pad" style={drumpadstyle} onClick={this.handleE}>
E
</button>
<button id="closedhi" class="drum-pad" style={drumpadstyle} onClick={this.handleA}>
A
</button>
<button id="snare" class="drum-pad" style={drumpadstyle} onClick={this.handleS}>
S
</button>
<button id="shaker" class="drum-pad" style={drumpadstyle} onClick={this.handleD}>
D
</button>
<button id="rim" class="drum-pad" style={drumpadstyle} onClick={this.handleZ}>
Z
</button>
<button id="cowbell" class="drum-pad" style={drumpadstyle} onClick={this.handleX}>
X
</button>
<button id="conga" class="drum-pad" style={drumpadstyle} onClick={this.handleC}>
C
</button>
<audio controls={true} className="clip" id="Q" style="display:none">
<source src={kick1} type="audio/mp3" / >
Your browser does not support the audio tag.
</audio>
<audio controls={true} className="clip" id="W" >
<source src={kick2} type="audio/mp3" / >
Your browser does not support the audio tag.
</audio>
<audio controls={true} className="clip" id="E" >
<source src={openhi} type="audio/mp3" / >
Your browser does not support the audio tag.
</audio>
<audio controls={true} className="clip" id="A" >
<source src={closedhi} type="audio/mp3" / >
Your browser does not support the audio tag.
</audio>
<audio controls={true} className="clip" id="S" >
<source src={snare} type="audio/mp3" / >
Your browser does not support the audio tag.
</audio>
<audio controls={true} className="clip" id="D" >
<source src={shaker} type="audio/mp3" / >
Your browser does not support the audio tag.
</audio>
<audio controls={true} className="clip" id="Z" >
<source src={rim} type="audio/mp3" / >
Your browser does not support the audio tag.
</audio>
<audio controls={true} className="clip" id="X" >
<source src={cowbell} type="audio/mp3" / >
Your browser does not support the audio tag.
</audio>
<audio controls={true} className="clip" id="C" >
<source src={conga} type="audio/mp3" / >
Your browser does not support the audio tag.
</audio>
</div>
</div>
</div>
)
>Solution :
You’re just using the style attribute wrong in the first audio tag!
Change
<audio controls={true} className="clip" id="Q" style="display:none">
To
<audio controls={true} className="clip" id="Q" style={{display:"none"}}>