javascript очистить innerHTML

Я пытаюсь очистить html, который заполняется в id = "p1", а затем в p2, но пока я не могу очистить его после работы функции вычисления. Я очень новичок в javascript, поэтому прошу прощения, если этот вопрос слишком новичок.

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