最初の１回だけJavascriptを実行したい

Question

初歩的なことかもしれませんが教えて下さい。

<input type="button" value="押" id="RRR" onclick="RanRan();onclick='disabled = true;'">

<audio id="sound">
<source src= "/audio/hogehoge.mp3" type="audio/mp3">
</audio>

window.addEventListener('load', function(){
	var option = {
	once: true
	};
	document.getElementById("RRR").addEventListener('click', RanRan);});

function RanRan() {
		
	document.getElementById("sound").load();
   	document.getElementById("sound").play();
}

#解決したい点

id sound　にあるmp3を鳴らすようにしています。

この状態ですと、押せば押すだけならせるので
最初の１回だけ。または２回だけならせるようにしたいのですがどのように設定すればいいかわかりません。

Jquery の　.one('click', function() {　のようなことをしたいです。

非常に初歩的なことかもしれませんが教えてもらえますと助かります。

※追記してみましたが、これでも何度もなってしまいます。

Comments

[m.ts10806]

コードはマークダウンのcode機能にてご提示ください

[koinoborisan]

code機能で提示しなおしました。ありがとうございます。

Answer 1

他の回答でも書かれていますが、クリックイベントを拾うのをonclickかaddEventListenerのどちらか一つに絞りましょう。
んで、ボタンの無効化とone相当の事をやりたいのとは全く無関係なので、別々に考えていきましょう。

まずはボタンの無効化から。
onclickでdisabledを有効にしたいなら、disabledではなく、this.disabledと、thisを付けましょう。
disabledだけでは、ボタン要素とは全く無関係の変数disabledを参照しようとします。(そして変数が見つからなければエラーを吐くでしょう。)

<input type="button" value="押" id="RRR" onclick="this.disabled=true;">

イベントハンドラ内でボタンを無効にしたいならthisにボタン要素が入るので、これを利用しましょう。

function RanRan()
{
    document.getElementById("sound").load();
    document.getElementById("sound").play();
    this.disabled = true;
}

次に、イベントリスナの無効化についてです。
HTMLElementには、Jqueryのone相当のメソッドはありません。
素直にremoveEventListenerを使いましょう。

function RanRan()
{
    document.getElementById("sound").load();
    document.getElementById("sound").play();
    this.removeEventListener("click",RanRan);
}

Answer 2

下記のようにするとRanRan()が1回実行されるとRRRボタンが非活性になります。

function RanRan() {
    document.getElementById("sound").load();
    document.getElementById("sound").play();
    document.getElementById("RRR").setAttribute("disabled", true);
}

詳細はJavaScript 要素を活性/非活性にする(disabled)を参照ください。

Answer 3

下記でどうですか。

<input type="button" value="押" onclick="RanRan();disabled = true;">

Comments

[koinoborisan]

ありがとうございます。
onclickをを変えてみたのですが、症状的にはかわらないです。

現状、まったくならないわけではなく、鳴るのは鳴ります。
onclickがダブっている状態でも鳴りますが、押すたびになってしまうので
２回め以降は押してもならないようにjavascriptで２回め以降は「押せない」もしくは、
押してもならないようにしたいです。

Answer 4

onclickの書き方が変です。
ある程度いかすなら

<input type="button" value="押" onclick="RanRan();disabled = true"> 

Comments

[koinoborisan]

ありがとうございます。
onclickをを変えてみたのですが、症状的にはかわらないです。

現状、まったくならないわけではなく、鳴るのは鳴ります。
onclickがダブっている状態でも鳴りますが、押すたびになってしまうので
２回め以降は押してもならないようにjavascriptで２回め以降は「押せない」もしくは、
押してもならないようにしたいです。

[yambejp]

document.getElementById("RRR").addEventListener('click', RanRan);
のくだりがいまいちなんのために入れているかわかりません
HTML要素のonclickに直接書いているんですから、いらないですよね？

[koinoborisan]

そうなんです。onclickに書いているのに実行される理由がわからないのです・・・。