javascript clear innerHTML

Question

I am trying to clear the html that gets populated within the id="p1" and later the p2, but for now i cant get it to clear after the calculate function works. I am very new to javascript so i do apologise if this question is too novice.

    <section class="scoreboard">
    <div class="score1" style="display: inline-block;" >
        <p>SCOREBOARD P1</p>
        <span class="scorebox" id="p1"></span>
    </div>
    <div class="score2" style="display: inline-block;" >
        <p>SCOREBOARD P2</p>
        <span class="scorebox" id="p2"></span>
    </div>
</section>
<section>
    <input type="button" value="Calculate"   id="calculate"  onclick="calculatep1()"/>
    <input type="button" value="Clear Score" id="clearScore" onclick="clear()" />
    <input type="button" value="Next Player" id="nextPlayer" onclick="changeplayer()" />

</section>
<script>
 function calculatep1() {
 document.getElementById('p1').innerHTML=1234;
 };
 function clear() {
 document.getElementById('p1').innerHTML='';
 };
</script>