JavaScriptの質問をしたり答えたりする掲示板
JavaScriptに関する質問を何でもしていい掲示板です。匿名での投稿も可能です。どんなことでもどしどし書き込んでください。回答もどなたでも自由にできます。僕も回答できる内容であれば必ず回答します！
質問は下記に沿って書いていただくと回答しやすくなります。
- 実際のソースコードがある場合、可能な範囲で書いていただくと問題点を見つけやすくなります。
- 実際に発生したエラーメッセージがある場合、コピペしていただくと問題解決につながる可能性が高いです。
- 見た目上の問題の場合、スクリーンショットを貼ると状況が把握しやすくなります。
JavaScript初心者です。簡単なアニメーションを作りたいのですが実装方法がわからず困っています。
・やりたいこと
4枚の画像が0.1秒毎にズームしながら切り替わり、0.5秒毎にズームしながら画像を3秒間表示する。
説明が分かりにくくすみません。つまり、
1.png→2.png→3.png→4.png→1.png→2.png…の順で0.1秒ごとにパッパッパっと画像が切り替わって、一周して1.pngに戻ってきた時に3秒表示。またパッパっと切り替わって、一周して2.pngに来た時に3秒表示…みたいなものが作りたいです。
ズームしながら0.1秒毎に切り替えまでは調べて分かりましたが、「0.5秒毎に3秒表示」の部分がつまっています。
なんとなくsetTimeoutを使うんだろうということは分かるのですが書き方が分からず、ご教授頂けないでしょうか。
動きの部分はcssで行っています。また、フェードインと記載してますが実際はフェードではなく切り替わる感じにしています。
html
<ul id="slide_wrapp">
<li class="slide_item"><img src="img/1.png" alt=""></li>
<li class="slide_item"><img src="img/2.png" alt=""></li>
<li class="slide_item"><img src="img/3.png" alt=""></li>
<li class="slide_item"><img src="img/4.png" alt=""></li>
</ul>
JavaScript
function sliderStart() {
const slide = document.getElementById('slide_wrapp'); //スライダー親
const slideItem = slide.querySelectorAll('.slide_item'); //スライド要素
const totalNum = slideItem.length - 1; //スライドの枚数を取得
const FadeTime = 1000; //フェードインの時間
const IntarvalTime = 100; //クロスフェードさせるまでの間隔
let actNum = 0; //現在アクティブな番号
let nowSlide; //現在表示中のスライド
let NextSlide; //次に表示するスライド
// スライドの1枚目をフェードイン
slideItem[0].classList.add('show_', 'zoom_');
// 処理を繰り返す
setInterval(() => {
if (actNum < totalNum) {
let nowSlide = slideItem[actNum];
let NextSlide = slideItem[++actNum];
//.show_削除でフェードアウト
nowSlide.classList.remove('show_');
// と同時に、次のスライドがズームしながらフェードインする
NextSlide.classList.add('show_', 'zoom_');
//フェードアウト完了後、.zoom_削除
setTimeout(() => {
nowSlide.classList.remove('zoom_');
}, FadeTime);
} else {
let nowSlide = slideItem[actNum];
let NextSlide = slideItem[actNum = 0];
//.show_削除でフェードアウト
nowSlide.classList.remove('show_');
// と同時に、次のスライドがズームしながらフェードインする
NextSlide.classList.add('show_', 'zoom_');
//フェードアウト完了後、.zoom_削除
setTimeout(() => {
nowSlide.classList.remove('zoom_');
}, FadeTime);
};
}, IntarvalTime);
}
CSS
#slide_wrapp{
position: relative;
overflow: hidden;
padding: 0;
width: 500px;
}
.slide_item{
opacity: 0;
transform: scale(1);
transition: opacity 0.01s linear, transform 1s linear; //秒数に注意
position: relative;
z-index: 1;
}
.slide_item:not(:first-child){
position: absolute;
top: 0;
left : 0;
}
.slide_item.show_{
opacity: 1;
}
.slide_item.zoom_{
transform: scale(1.02);
}
.slide_item img{
display: block; //下に余白ができないように
}
何卒よろしくお願いします。
Uncaught TypeError: Cannot read property 'dataset' of null になる理由
お世話になっております。前回はありがとうございました。
２回目の質問になります。
今回の質問はコードが長いのでためらいましたが、どうしても自力では理解できず質問させていただきました。
現在TodoMVCというTodoアプリのサンプルサイトを参考に勉強しています。
https://todomvc.com/examples/vanillajs/
https://github.com/tastejs/todomvc/tree/gh-pages/examples/vanilla-es6/src
質問の内容はエラーになる理由なのですが、エラー自体は解決できています。
しかし、そのコードでなぜエラーが解決できるのかがわからず質問させていただきました。
エラーの内容はこちらです。
Uncaught TypeError: Cannot read property 'dataset' of null
at _itemId (view.js:7)
at HTMLInputElement.<anonymous> (view.js:247)
at HTMLUListElement.dispatch(helpers.js: 44)
問題の箇所はview.jsにあるbindEditItemSaveとbindEditItemCancelの★の部分です。
これらが参照しているview.jsの_itemId関数ではelementの親要素（またはさらにその親要素）のdatasetを取得しているのに
その子要素であるelement(編集中のinput)にdatasetを指定しないと上記のエラーになってしまいます。
この理由が理解できずに苦戦しています。
このエラーの理由をご教授いただけますでしょうか。
考えたこと
バブリングとキャプチャリングが関係しているのかと推察して
stopPropagationを使ってみましたがダメでした。
Todoアイテムを追加し編集中の状態のHTMLです
<section style="display: block;" class="main">
<input id="toggle-all" class="toggle-all" type="checkbox">
<label for="toggle-all">Mark all as complete</label>
<ul class="todo-list">
<li data-id="1613277309944" class="editing"> /* このdatasetを取得しているはず */
<div class="view">
<input class="toggle" type="checkbox">
<label>テスト</label>
<button class="destroy"></button>
</div>
<input class="edit"> /* 編集中のinput */
</li>
</ul>
<footer class="footer">
<span class="todo-count">1 item left</span>
<ul class="filters">
<li>
<a href="#/" class="selected">All</a>
</li>
<li>
<a href="#/active">Active</a>
</li>
<li>
<a href="#/completed">Completed</a>
</li>
</ul>
<button class="clear-completed" style="display: none;">Clear completed</button>
</footer>
</section>
helpers.js
export function $on(target, type, callback, capture) {
target.addEventListener(type, callback, !!capture);
}
/**
* セレクタに一致するすべての要素のイベントにハンドラを付けます。
*/
export function $delegate(target, selector, type, handler, capture) {
const dispatch = (event) => {
const targetElement = event.target;
const potentialElements = target.querySelectorAll(selector);
let i = potentialElements.length;
while (i--) {
if (potentialElements[i] == targetElement) {
handler.call(targetElement, event);
}
}
}
$on(target, type, dispatch, !!capture);
}
view.js
// TodoアイテムのIDを10進数の整数値にパースする関数
// ★親要素のdatasetを取得しているはずなのに子要素のdatasetを作らないとエラーになる
const _itemId = element => {
return parseInt(element.parentNode.dataset.id || element.parentNode.parentNode.dataset.id, 10);
};
export default class View {
/**
* Todoリストの編集中アイテムがフォーカスを失った時にhandlerを実行
*/
bindEditItemSave(handler) {
$delegate(this.$todoList, 'li .edit', 'blur', ({ target }) => {
if (!target.dataset.iscanceled) { // ② ★これが無いとエラーになってしまう
handler(_itemId(target), target.value.trim());
}
}, true);
$delegate(this.$todoList, 'li .edit', 'keypress', ({ target, keyCode }) => {
if (keyCode === ENTER_KEY) {
target.blur();
}
});
}
/**
* Todoリストの編集中アイテムでESCキーが押された時にフォーカスを外しhandlerを実行
*/
bindEditItemCancel(handler) {
$delegate(this.$todoList, 'li .edit', 'keyup', ({ target, keyCode }) => {
if (keyCode == ESCAPE_KEY) {
target.dataset.iscanceled = true; // ①★これが無いとエラーになってしまう
target.blur();
handler(_itemId(target));
}
});
}
}
controller.js
export default class Controller {
constructor(store, view) {
this.store = store;
this.view = view;
view.bindEditItemSave(this.editItemSave.bind(this));
view.bindEditItemCancel(this.editItemCancel.bind(this));
}
/**
* エディットでアイテムを保存します。
*/
editItemSave(id, title) {
if (title.length) {
this.store.update({ id, title }, () => {
this.view.editItemDone(id, title);
});
} else {
this.removeItem(id);
}
}
/**
* アイテム編集モードをキャンセルします。
*/
editItemCancel(id) {
this.store.find({ id }, data => {
const title = data[0].title;
this.view.editItemDone(id, title);
});
}
}
JavaScript初心者です。
解決できずにつまってしまったため皆様のご指摘を頂けたら幸いです。
HTML、CSSにて画像がZ軸で重なった状態で、マウスホバーした時にspanタグで囲んでいる画像をdisplay=noneにして下の画像が出る仕様を行っています。
実際には以下のリストの中に同じclass名で複数liが入ります。
<ul class="img-cont">
<li class="hover-wrapper hover-wrapper1">
<span class="item-wrapper1">
<img src="#"></span>
<a href="#">
<img src="#"></a>
</li>
</ul>
以下のようにjQueryにて個別に実装して問題は無さそうなのですが、それぞれのli、spanのclass個数を取得して配列にし、それぞれにホバーイベントを実装するにはどのようにすれば良いでしょうか。
$('.hover-wrapper1').hover(function () {
$('.item-wrapper1').css('display', 'none');
}, function () {
$('.item-wrapper1').css('display', 'inline-block');
});
$('.hover-wrapper2').hover(function () {
$('.item-wrapper2').css('display', 'none');
}, function () {
$('.item-wrapper2').css('display', 'inline-block');
});
.....
初歩的な質問で申し訳ございませんが、何卒ご指導の程宜しくお願い申し上げます。
初めまして、
グローバル変数が何故か値を保持してくれません！！
あるfnction内でグローバル変数を使用しているのですが、
functionを抜けた後でも、」値を保持して欲しくて、function内でもグローバル変数に値を格納しています
しかしながら、
何故かグローバル変数を再度使用しようとしても、値が入ってません、、
どういった要因が考えられるでしょうか？？
どなたかお力添え願いたいです、、
独学で躓いてしまった為、
初めてこちらの掲示板を利用させて頂きます。
何卒お願いいたします。
使用エディタはVisualStudioCodeです。
【 質問内容 】
JavaScript関連動画やWEBページを見ながら練習している初心者です。
絵のような画像を順番にフェードインして並べるプログラムを
実装してみたいのですが、複数表示しようとすると上手くいきません。
参考のWEBページ( https://qiita.com/t-ohtake/items/2997d449e7e243d77109 )
HTMLリソース中の２つのdocument.write() の内１つをコメントアウトすると、
正しく表示されますが、
どちらも順番に表示させようとするとimg_2のようにどちらか一方のみしか表示されません。
また、何回か連続でリロードするとどちらか一方だけに固定されている訳ではなく、
タイミングによってはもう一つの方が表示されると言った感じでした。
原因が分かる方がいらっしゃいましたら恐れ入りますが、
ご教示を頂けますと幸いです。
HTMLコード( index.html )
<!DOCTYPE html>
<html lang="en">
<title>Document</title>
</head>
<body>
<!--スクリプト読み込み-->
<script type="text/javascript" src="index.js"></script>
<script>
//画像１表示
document.write('<IMG src="/Users/apple/Desktop/frontend/img/apple.jpg" id="gazou1" name="gazou1" style="visibility : hidden;" onload="FadeInstr(1)">');
//画像２表示
document.write('<IMG src="/Users/apple/Desktop/frontend/img/orange.jpg" id="gazou2" name="gazou2" style="visibility : hidden;" onload="FadeInstr(2)">');
</script>
</body>
</html>
JavaScriptコード(index.js)
opa=0; //透明度 0は透明
opacnt=3; //透明度の増減の間隔
timer=100; //setTimeout関数の実行間隔 ミリ秒
gazouId = "";//対象の画像
// フェードイン
function FadeInstr(id)
{
//対象の切り替え
if(id==1){
gazouId = "gazou1";
}else{
gazouId = "gazou2";
}
MyIMG = document.getElementById(gazouId);
MyIMG.style.visibility = "visible";
FadeIn1(gazouId,opa);
}
//透明度を増加。
function FadeIn1(gazouId,opa)
{
if (opa <= 100)
{
MyIMG.style.filter = "alpha(opacity:"+opa+")"; // IE のソース
MyIMG.style.opacity = opa/100; //Mozilla Firefoxのソース
opa += opacnt;
setTimeout("FadeIn1('"+gazouId+"',"+opa+")", timer);
}
}
このサイトにあるようなGoogle ReCAPTCHAはどのようにして、画像を選択させるポップアップを出しているのですか？
押し付けな質問で申し訳ございません、、、
javascriptに関して質問します。
テーブルなどで複数のマスが並んでいて、各々のマスをクリックするとclassList.toggleやjqueryのtoggleclassによって色が付いたり消えたりするようなページがあります。
このようなページで「9つあるマスの内1個目と3個目がクリックされて色が付いている」という各マスの状態をLocalStorageなどに保存して、リロードしたり次回以降にドキュメントを読み込んだりしたとしてもリセットされることなく前回と同じ状態にすることは可能でしょうか？
なにか作ってて詰まった、とかじゃなくて単なる好奇心からの質問で大変恐縮なのですが、「null と undefined を区別して処理を分けないと困る」ようなシチュエーションってあるのでしょうか？
js の処理系の実装側にとって null と undefined は別物というのはわかるのですが、アプリ書く側にとってはそんなのどっちでも同じ例外処理に飛ばせばいいだけで、区別しなきゃならない理由なんてないんじゃないか？この区別って言語実装者の自己満足なんじゃないか？
と、思ったのですが考えても答えが思いつかず...
某国際版知恵袋の日本語版みたいな所でも質問してみて、回答がもらえなかったので js の識者っぽい人選んで50人ぐらい回答依頼してみてやっぱことごとく回答もらえなかった質問でしたので、こちらでも回答がなかったとしても別に落ち込みませんので ^^/ 変な質問だと思われましたら無視して流していただければとぞんじます次第です