Mehrere HTML Texte gleichzeitig ändern

[SlowCoder]

Hallo zusammen,

ich beschäftige mich erst seit kurzem mit JS und wollte eigentlich unter einem Bild, zwischen zwei Preisen, hin und her schalten.
Das Funktioniert auch, aber  nur beim 1. Bild, alle anderen bleiben unverändert. 
Kann mir jemand sagen warum und wie ich das ändern kann?

PHP-Code:

<script type="text/javascript">
function onoff(){
currentvalue = document.getElementById("onoff").value;
if(currentvalue == "Off"){
{document.querySelector(".showpreis").innerHTML="Preis 1";}
}else{
{document.querySelector(".showpreis").innerHTML="Preis 2";}
}
}
</script>

<input type="button" value="On" id="onoff" onclick="onoff();">

<p class="showpreis"></p>
<p class="showpreis"></p>
<p class="showpreis"></p>
<p class="showpreis"></p>