onchangeイベントを使ってspanタグにある値が変わったらアラートを出したい

すいません質問がございます。

onchangeイベントを使ってspanタグにある値が変わったらアラートを出したいです。

ものすごく単純なタグとして、下記の一行があります。

<span id="test">1</span>

そして下記のようなfunctionを作っておいて、もし、1が他の値になったらアラートを出す。といった仕組みを作りたいです。

var a = document.getElementById('test')
a.onchange = function(){
alert("abcde");
}

上記のfunctionは動きません。。。

html側は手を加えず、あくまでもjavascriptだけでアラートを出したいです。
これは可能でしょうか？

大変お手数ですがなにとぞよろしくお願いいたします。

No.6 ベストアンサー 回答者： yambejp 回答日時： 2017/02/01 13:03

#4について

なにか大きな勘違いをされているようですが・・・
>その後サイトを訪問したユーザが2に変更したら、何も起きないですよね。

あとから来たひとが更新したら前のユーザーのHTMLにアラートをだすのでしょうか？
それは理論的にできません。

もしやるとしたらajaxで特定箇所だけ常に最新の状態にするような
プログラムを書くことですが、相当ハードルが高くなるので
おそらくいまの質問の内容から察するに質問者さんの経験と知識では
手がとどかないと思います

この回答へのお礼

自己解決しました。

こんな感じのことがやりたかったです。
これで実現しました。

var txt1 = document.getElementById('test');
var txt2 = txt1.textContent;
​
setInterval(function(){
var txt3 = txt1.textContent;
if(txt2 != txt3 ){
console.log("test");
}
},1000);

お礼日時：2017/02/01 14:12

No.5 回答者： yambejp 回答日時： 2017/02/01 12:25

もう一つ

#1で書いたソースがアラートを出すタイミングは。
ブラウザに表示されている「1」のところにマウスでカーソルをあわせ
なにかキーボードで入力をしたタイミングです

これもFEPが有効になっていると未確定な状態でalertがでてしまうので
spanからblurしたときとか何らかの条件をつけないといけないかもしれません

No.4 回答者： yambejp 回答日時： 2017/02/01 12:22

>document.getElementById('test').innerHTML = 2

>alert("change!");

そうですね
少し丁寧にやると
var val1=document.getElementById('test').innerHTML;
var val2=2;
document.getElementById('test').innerHTML=val2;
if(val1=val2){
alert("change");
}
のようにすれば元データから変更があった場合にアラートがでます

この回答へのお礼

ありがとうございます。

これをページを監視しておいて、
変わったときにアラートが出るようにしたいです。
というのも、このJavaScriptをWebに実装したら、読み込むのは最初の一回だけじゃないですか。
でも、その後サイトを訪問したユーザが2に変更したら、何も起きないですよね。
それだと意味がないので、変わったときにアラートを出したいです。
setintervalがヒントになりますかね。。。

お礼日時：2017/02/01 12:53

No.3 回答者： yambejp 回答日時： 2017/02/01 12:05

＞document.getElementById('test').innerHTML = 2

それは考え方がおかしいです
プログラムで書き換えているのですから、その時点で
プログラムでアラートを出せば済む話です

この回答へのお礼

ありがとうございます。

>>プログラムで書き換えているのですから、その時点でプログラムでアラートを出せば済む話です

つまり、
document.getElementById('test').innerHTML = 2
alert("change!");

とする。ということでしょうか？

また、本当にあほな質問ですいません。
それではアドバイスいただいたJavaScriptはどの時点でアラートが表示されますか？

document.addEventListener('input',function(e){
var t=e.target;
if(t.id=="test"){
console.log('change');
}
});

値が変わったときに変わったことをトリガーにアラートを出す。とやりたいです。。。質問が変だったらすいません。

お礼日時：2017/02/01 12:16

No.2 回答者： Ogre7077 回答日時： 2017/02/01 11:25

一定間隔で監視するのが確実だと思います。

window.addEventListener('DOMContentLoaded', function(){
var p = document.getElementById('test');
var v = p.textContent;
var f = function(){ var a = p.textContent; if (v != a) { alert('change!'); v = a; } };
setInterval(f, 500);
}, false);

この回答へのお礼

アドバイスありがとうございます。

ChromeのConsoleでこちらのスクリプトを叩いて、
その後に、document.getElementById('test').innerHTML = 2; で値を変えた後、change! のアラートは出てきませんでした・・・。

再度アドバイスいただけると幸いです。

お礼日時：2017/02/01 11:56

No.1 回答者： yambejp 回答日時： 2017/01/31 23:36

spanの値はどうやってchangeさせるのでしょうか？contenteditable?

spanはchangeを受け付けるかどうかあやしいので
inputイベントで代替させたほうがよいかもしれません
（ただしinputは確定前でも反応するのでちゃんとやるなら調整が必要）

<script>
document.addEventListener('input',function(e){
var t=e.target;
if(t.id=="test"){
console.log('change');
}
});
</script>
<span id="test" contenteditable=true>1</span>

この回答へのお礼

アドバイスありがとうございます。

ChromeのConsoleでこちらのスクリプトを叩いて、
その後に、document.getElementById('test').innerHTML = 2; で値を変えた後、console.logでchangeは出てきませんでした・・・。

再度アドバイスいただけると幸いです。

お礼日時：2017/02/01 11:57