pタグのイベント属性について

Question

Ｐタグが空欄　⇒　"GO"ボタンを表示
Ｐタグが空欄でない　⇒　"GO"ボタンを非表示 にしたいと思っています。
javascriptを利用する場合、pタグのイベント属性は何になるのでしょうか？
*onclickならばもちろん作動しますが、"pタグが空欄でない"というようなイベント属性はあるのでしょうか？

php部分
$message = "";
if(~){
$message = "abc";
}else {
$message = "";
}

html　と　javascript　部分

<form> <P id="pid" 属性=changeButton();><?php echo $message;?></p> <input type="submit value="GO" id="button"> <script> function changeButton() { var element1 = document.getElementById("pid").value; var element2 = document.getElementById("button"); if (element1="") { element2.style.visibility ="visible"; } else { element2.style.visibility ="hidden"; } </script> </form>

Comments

[m.ts10806]

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

Answer 1

JavaScriptで動的にpの内容が変更されるようには見えないので、PHPでhiddenなりを付与するのが楽なケースだと思います。

<P id="pid" 属性=changeButton();><?php echo $message;?></p>
<input type="submit value="GO" id="button" <?php if(!$message){ echo '"hidden"';} >

みたいな感じでしょうか。

動的にpの内容が変化しない場合で、どうしてもJavaScriptでやりたい場合は、window.onload とかで画面描画時に該当のpの中身が空かどうかチェックするという感じになります。

JavaScriptで動的にpの中身が変更される場合は
Pタグ等の動的テキスト追加の監視 の様な形でpタグの中身の変化を監視して、空になった場合に処理を行う　という感じで実装が可能です。

Comments

[makosama4493]

<input type="submit value="GO" id="button" <?php if($message<>""){ echo "hidden"'};? >
で解決できました。
ありがとうございました。

[tanat]

解決してよかったです。
フィードバックありがとうございます。

回答のコードだと条件間違っていましたね、修正しておきます。

Answer 2

こういうことですか？

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  var flg=document.querySelector('#pid').textContent=="";
  document.querySelector('#button').style.display=flg?"":"none";
});
</script>

<form>
<P id="pid">a</p>
<input type="submit" value="GO" id="button">