いいねボタンと悪いねボタンを実装予定。 #いいね👍

2023.04.07

Logging

おはようございます、週末の夜から休日を使用して、とあるサイトにいいねボタンと悪いねボタンを実装予定です。これにより、コミュニティが盛り上がることを少し期待しているけども、そんなに変わらないだろうなって思います。ですが作ろうと思っています(　･ิω･ิ)。

<button id="likeBtn">👍</button>
<button id="dislikeBtn">👎</button>

<p><span id="likeCount">0</span></p>

いいねの数カウントと悪いはカウントしないものを実装です、そうYOUTUBEと同じ外見的、仕様です、中身はガタガタな物なんですが・・・。外見だけでも合わせようと思います、同じ仕様にするのは、それが巨人が一番良いと結論付けたのだからそれには大いに意味があるだろうという理由から、そうするように決めました。

// カウンターの初期値を設定
let likeCount = 0;
let dislikeCount = 0;

// 「いいね」ボタンのクリックイベントを追加
document.getElementById("likeBtn").addEventListener("click", function() {
  likeCount++;
  document.getElementById("likeCount").textContent = likeCount;
});

因みに、今月から金曜日も仕事になりました、先月末まで４勤務だったので、少しばかりアレですが５勤の方がONとOFFの切り替えが出来てよいです。フルリモートなので、ONとOFFの切り替えが難しいでしょうという人もいると思いますが、息を吸うようにいつもコードを書いているので正直な所、難しい事ではないです。仕事の場合、注意をはらっているのですが…まだまだ抜けがあるのが現状です。それが嫌だなって思います。そこを直したいなって日々思っています。

トイウコトデ、日曜日には実装済みになっていると思います。

著者名  @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

投稿日時 2023年04月07 06:00日

タグ

addEventListener, button&gt, dislikeBtn&quot, function, getElementById, gt, let dislikeCount, likeCount, lt, quot;click&quot, quot;likeBtn&quot, quot;likeCount&quot, span&gt, textContent, youtube, クリックイベント, トイウコトデ, 外見, 設定 let, 追加 document.getElementById,

demo23、javascriptの非同期同期処理?

2020.11.18

Logging

今日はJavaScriptで非同期、同期処理のことに付いて考えてみた。関数を呼び出して返却の値を変数に渡す処理を作って頂けると非同期処理と同期処理の違いがわかるかと思います。例えばこういうJSの処理があるとします。

document.getElementById("btn").addEventListener("click", async (e) => {
	test1();
	test2();
	test3();
	await test1();
	await test2();
	await test3();
});

function test1() {
	return new Promise(resolve => {
		setTimeout(() => {
			console.log("btn = 1");
			resolve('1');
		}, 3000);
	});
}
function test2() {
	return new Promise(resolve => {
		setTimeout(() => {
			console.log("btn = 2");
			resolve('2');
		}, 2000);
	});
}
async function test3() {
	return new Promise(resolve => {
		setTimeout(() => {
			console.log("btn = 3");
			resolve('3');
		}, 100);
	});
}

こちらの処理を試すと結果、このような内容がデバックモードで表示されます。予想通りの結果が返ってきましたか？それとも予想外の結果が返ってきましたか？

asyncが付いていてawaitがついてない場合とついている場合とでは違いの差がわかるかと思います。いろいろと試してみると非同期処理の応用が出来るかと思います、逆に言えば上手く非同期処理を使いこなすことが出来るとコードが短縮出来たり、効率的に回せるのではないかと思います。自分もこれらを使っていろいろと作ってみたいですね(´Д｀)。因みに今回、Promiseを簡略化したパターンでコードを書いています。

尚、Demo23にはデモコードが存在しますので動作を検証してみてください。
https://zip358.com/tool/demo23/

著者名  @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

投稿日時 2020年11月18 05:01日

タグ

addEventListener, async, async function test, await, await test, console.log, document.getElementById, function test, JS, Promise, quot, quot;btn, quot;btn&quot, quot;click&quot, resolve, setTimeout, デバックモード, 変数, 返却, 関数,