onclick属性を使わないコードで以下を変える

黒猫クロちゃん

ねむい💤

”HTML イベント属性（「on*」）は AMP では許可されていません。代わりに「amp-bind」を使用してください。この問題がある AMP ページは無効です。無効な AMP ページは Google で配信されません。”というメールがGoogleから届きました。

AMP (Accelerated Mobile Pages) では、特定の制限の下でJavaScriptのイベントリスナーを使用することが可能です。しかし、AMPはページのパフォーマンスを最適化するために設計されているため、カスタムJavaScriptは制限されています。

AMPでは、代わりにamp-bindという組み込みのコンポーネントを使用して、ユーザーのアクションに応じてページの要素を変更することができます。これは、JavaScriptのイベントリスナーのように動作します。

しかし、AMPの制限を超えてJavaScriptを使用する必要がある場合は、amp-scriptというコンポーネントを使用することができます。これにより、カスタムJavaScriptをAMPページに安全に組み込むことができます。

JavaScriptのイベントリスナーの基本的な使用方法については、以下のようになります。

JavaScript

element.addEventListener('event', function() {
// ここにイベントが発生したときの処理を書く
});

ここで、elementはイベントリスナーを追加する対象の要素、eventはイベントの種類（例えば、’click’や’mouseover’など）、そしてfunctionはイベントが発生したときに実行される関数です。

ただし、AMPを使用する際は、その制限とベストプラクティスを理解することが重要です。具体的な実装方法や詳細は、AMPの公式ドキュメンテーションをご覧ください。

AMPを使用する場合はonclick属性は不可なので、そのためにはJavaScriptのイベントリスナーを使用することができます。以下に示すように、onclick属性を使わずに同じ機能を実現することができます。

📝目次

<!– 表示部分 –>
<span onclick=”obj=document.getElementById(‘open’).style; obj.display=
(obj.display==’none’)?’block’:’none’;”>
<a style=”cursor:pointer;”><h3>目次</a></h3>
</span>
<ul>
<!– 折り畳まれる部分 –>
<span id=”open” style=”display: none; clear: both;”>
<p><pre class=”wp-block-code”><code><div style=”border: 5px solid #c0c0c0; padding: 10px; border-radius: 10px; background: ;”>
<h3 class=”wp-block-heading has-text-align-left”><strong>目次</strong></h3>
<h3 class=”wp-block-heading”><a href=”#☆a”>ああああ</a></h3>
<h3 class=”wp-block-heading”><a href=”#☆b”>いいいい</a></h3>
<h3 class=”wp-block-heading”><a href=”#☆c”>うううう</a></h3>
</div></code></pre></p>
</span>
</ul>

修正後のコード

onclick属性を使わないようにすること。そのためにはJavaScriptのイベントリスナーを使用することができます。以下に示すように、onclick属性を使わずに同じ機能を実現することができます。

<!– 表示部分 –>
<span id=”toggleButton“>
<a style=”cursor:pointer;”><h3>目次</a></h3>
</span>
<ul>
<!– 折り畳まれる部分 –>
<span id=”open” style=”display: none; clear: both;”>
<p><pre class=”wp-block-code”><code><div style=”border: 5px solid #c0c0c0; padding: 10px; border-radius: 10px; background: ;”>
<h3 class=”wp-block-heading has-text-align-left”><strong>目次</strong></h3>
<h3 class=”wp-block-heading”><a href=”#☆a”>ああああ</a></h3>　　　　　　　　
<h3 class=”wp-block-heading”><a href=”#☆b”>いいいい</a></h3>
<h3 class=”wp-block-heading”><a href=”#☆c”>うううう</a></h3>
</div></code></pre></p>
</span>
</ul>

<script>
document.getElementById(‘toggleButton’).addEventListener(‘click’, function() {
var obj = document.getElementById(‘open’).style;
obj.display = (obj.display == ‘none’) ? ‘block’ : ‘none’;
});
</script>

onclick属性の代わりにtoggleButtonに変更してGoogle検証に合格しました。

まとめ

AMPを使用する場合はonclick属性は不可なので、そのためにはJavaScriptのイベントリスナーを使用することができます。onclick属性を使わずに同じ機能を実現することができます。

onclick属性は、HTML要素がクリックされた際に発生するイベントの処理を設定するための属性です。これを使用せずにクリックして目次を展開するようにします。

ToggleButtonは、ユーザーがクリックすることでその状態が切り替わる、つまりオンとオフを切り替えることができるコントロールの一つです。

このコードでは、onclick属性の代わりにJavaScriptのaddEventListenerメソッドを使用しています。このメソッドは、指定したイベントが対象の要素で発生したときに呼び出される関数を設定します。この場合、クリックイベントが発生したときに、'open'のidを持つ要素の表示状態を切り替える関数が呼び出されます。この方法であれば、HTMLとJavaScriptの役割を明確に分けることができ、コードの可読性と保守性が向上します。

onclick属性の代わりにtoggleButtonに変更してGoogle検証に合格しました。

onclick属性を使わないコードで以下を変える

📝目次

関連投稿