【JavaScript】リンクボタン
どうも！LSSです！！
【CSS】跳ねるボール【多重アニメーションの実験】 - Little Strange Software
に、さじさんからいただいたコメント、
CSS装飾でボタン風に見せかける、ような事はよくやっていましたが、本物（？）のボタン（ここではフォームパーツとしてのボタン、の意）はあまり使っていなかった（コード生成ツール等で機能を割り当てるぐらい）ので、あまり難しいものではありませんがひとつ「リンクボタン」を記事にしてみます。
…と、考えた時には、またも はてなブログの仕様に悩まされるとは思っていなかったのでしたｗ
はてなブログには書けないコード
本文中にこうしてを入れ、押すと他のページが開きます。せんｗ
コード
本文中にこうして<input type="button" value="ボタン" onclick="window.open('https://little-strange.hatenablog.com/');"/>を入れ、押すと他のページが開きます。
※青文字部分は好きな文章に、オレンジ文字部分は飛び先のURLに書き換えます。
はい。
いきなり「はてなブログでは書けないコード」例です。
本来であればこのコードで「ボタンを押すと指定のURLを別タブで開く」という動作になります。
その「ボタンを押すと指定のURLを別タブで開く」を担っているのは、
onclick="window.open('https://little-strange.hatenablog.com/');"
の部分なのですが、はてなブログでinputタグにonclickオプションを書くと、なぜかバッサリ削除されてしまうんですね^^;
はてなブログでも書けるコード
本文中にこうしてを入れ、押すと他のページが開きます。
コード
本文中にこうして<input id="link01" type="button" value="ボタン" />を入れ、押すと他のページが開きます。
<script>
document.getElementById('link01').addEventListener('click',()=>{window.open('https://little-strange.hatenablog.com/');},false);
</script>
※オレンジ文字部分は任意のidで、好きに書き換える事ができます。
はてなブログで書ける・動作するようにコードを書くと、↑このようになります。
inputタグ内にスクリプトを書く事を諦め、別途<script>タグ内にイベントリスナーを仕掛けた形ですね。
コードは長くなり、固有のidを割り当てる必要が出てきましたが、これなら はてなブログ上でも問題なく動作します。
リンクの代用となるスクリプト
今回は、
window.open('飛び先のURL');
というのを使用しました。
これは別タブで指定したURLのページを開くものですが、もし「同じタブで飛び先に移動したい」場合には、
location.href='飛び先のURL';
に置き換える事で、新たにタブを開く事なくページ移動します。
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
円を足しつつ、タイミングずらしたら不思議な何かができそうです。（何かはわからないw）
昨日ちょっと知りたいことがありましてCSSとはてなでググったらLSSさんの記事とフジグチさんの記事がヒットしました（笑）本文にリンクのボタンを入れたいんですが、そんな記事ありませんでしたっけ？