JavaScriptの質問をしたり答えたりする掲示板

2019-01-29に作成

JavaScriptに関する質問を何でもしていい掲示板です。匿名での投稿も可能です。どんなことでもどしどし書き込んでください。回答もどなたでも自由にできます。僕も回答できる内容であれば必ず回答します!

質問は下記に沿って書いていただくと回答しやすくなります。

  • 実際のソースコードがある場合、可能な範囲で書いていただくと問題点を見つけやすくなります。
  • 実際に発生したエラーメッセージがある場合、コピペしていただくと問題解決につながる可能性が高いです。
  • 見た目上の問題の場合、スクリーンショットを貼ると状況が把握しやすくなります。
person
(匿名) #c1f72455
comment
4

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; //下に余白ができないように
}

何卒よろしくお願いします。


person
(匿名) #297972e9
comment
10

自分で3日トライしたのですがエラーや出力されなかったりで少し困ってます。
模範解答をいただけると助かります。お願いします

jsでいろんな国の時間を1秒おきに時間が更新されるようにしラジオボタンで画像と国の時間を変える
htmlとcssを変えずにjava script内(script.js)だけを変える
htmlとcssは②にあります。
ラジオボタンを切り替えたときに、選択した国と時刻に切り替えたいのが1つ目で

① 時差
日本/東京 ±0
オーストラリア/キャンベラ +1時間
インドネシア/ジャカルタ -2時間
エジプト/カイロ -7時間
イギリス/ロンドン -8時間
アメリカ/ニューヨーク -13時間
アメリカ/サンフランシスコ -16時間

時間に合わせて表示される画像を入れ替え
午前4時~午前9時59分 asa.png
午前10時~午後3時59分 hiru.png
午後4時~午後6時59分 ban.png
午後7時~午後11時59分 yoru.png
午前0時~午前3時59分 sinya.png


JavaScript

jikan{ font-size: 32px; color:#FFFFFF;

background-color:#333333;
padding:0px 8px; }
世界時計
現在の『日本/東京』の時刻は
です

日本/東京 オーストラリア/キャンベラ インドネシア/ジャカルタ エジプト/カイロ イギリス/ロンドン アメリカ/ニューヨーク アメリカ/サンフランシスコ

はじめまして。

現在、職場で貸与されているPCとスマホでデータのやり取り出来ないかと模索してます。

希望としてはスマホで作ったデータをPCにフォルダごとに入れたいと思っていますが、フォルダを作るところで躓いています。

方法があればお知恵を貸していただけないでしょうか。
よろしくお願いします。

また会社のPC・スマホなのでjクエリー等使わず純粋な(?)javascriptで作ることは可能でしょうか


Uncaught TypeError: Cannot read property 'dataset' of null になる理由

お世話になっております。前回はありがとうございました。
2回目の質問になります。
今回の質問はコードが長いのでためらいましたが、どうしても自力では理解できず質問させていただきました。

現在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にあるbindEditItemSavebindEditItemCancelの★の部分です。
これらが参照している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);
        });
    }
}

person
(匿名) #6c5377de

javascript超初心者です
学校の課題で三段階ドロップダウンを作りたいのですが途中頭がこんがらがってしまい
三個目を表示する方法いただきたくご教示頂きたく。。。。

以下コードです

1段階目(メイン)のプルダウンメニュー
<select class="mainselect">
<option value="">メイン</option>
<option value="a">A</option>
<option value="b">B</option>
</select>
2段階目(サブ)のプルダウンメニュー
<select id="A" class="subbox">
<option value="">サブ</option>
<option value="aa">A-A</option>
<option value="ab">A-B</option>
<option value="ac">A-C</option>
</select>
<select id="B" class="subbox">
<option value="">サブ</option>
<option value="ba">B-A</option>
</select>
3段階目(サブサブ)のプルダウンメニュー
<select id="aa" class="subsubbox">
<option value="">サブサブ</option>
<option value="aa1">A-A1</option>
</select>

<script type="text/javascript">

・ サブBOXを全て非表示にする
var allSubBoxes = document.getElementsByClassName("subbox");
for( var i=0 ; i
allSubBoxes[i].style.display = 'none';
}

・ 全てのプルダウンボックスごとに処理
var mainBoxes = document.getElementsByClassName('pulldownset');
for( var i=0 ; i
var mainSelect = mainBoxes[i].getElementsByClassName("mainselect");
・ メインのプルダウンメニュー
var subSelect = mainBoxes[i].getElementsByClassName("subbox");
・サブのプルダウンメニュー
mainSelect[0].onchange = function () {
・ 同じ親要素に含まれている全サブBOXを消す
var subBox = this.parentNode.getElementsByClassName("subbox");
・ 同じ親要素に含まれる.subbox
for( var j=0 ; j
subBox[j].style.display = 'none';
}
・ 指定されたサブBOXだけを表示する
if( this.value ) {
var targetSub = document.getElementById( this.value );
・「メインのプルダウンメニューで選択されている項目のvalue属性値」と同じ文字列をid属性値に持つ要素を得る
targetSub.style.display = 'inline'
}
}
});
・この後サブで選択したサブサブのみstyleのdisplayのをinlineにしたいのですがどうしたらいいでしょうか。。。
</script>


Javascript初心者です。
現在次のようなことがしたいのですが、コードが動かずどなたか知恵をお貸しくださると大変助かります。

・カレンダーの日付(tdに含まれる文字(td class=calendar_td)をクリックした際に、とあるdiv(class=purposeselection)を可視化したい(現段階ではスタイルシートのvisibility=hiddenに設定)

・作ってみたコード
var purpose=document.getElementsByClassName("purposeSelection")
document.addEventListener("click", function(e) {
if(e.target.classList.contains("calendar_td")) {
purpose.style.visibility='visible';
}
})

ですが、動かずどこがいけないのやら、見当がつきません。。。
何卒よろしくお願いします。。。


person
(匿名) #efa840ec
comment
11

首記の件、教えて頂きたく。
下記ソースコードで花びらの一枚を作成しました。
これを題名の通り花びらの角度を変えて複製する方法がありましたら教えて頂きたくお願い致します。

イメージとして添付画像の様にしたいです。
image

'use strict;'

//init
const canvas = document.getElementById('test');
const context = canvas.getContext('2d');
const WIDTH = $('#test').get(0).width = $(window).width();
const HEIGHT =$('#test').get(0).height = $(window).height();

//花びら(上)
context.beginPath();
context.moveTo(270,50);
context.quadraticCurveTo(300, 50, 260, 150);

context.moveTo(260,150);
context.quadraticCurveTo(240, 165, 230, 150);

context.quadraticCurveTo(210, 50, 230, 50);

context.moveTo(230,50);
context.lineTo(250,80);
context.lineTo(270,50);
context.lineWidth = 8;
context.strokeStyle = 'rgb(255,204,255)';
context.save();

context.moveTo(260,150);
context.quadraticCurveTo(240, 165, 230, 150);

context.quadraticCurveTo(210, 50, 230, 50);

context.moveTo(230,50);
context.lineTo(250,80);
context.lineTo(270,50);
context.stroke();


person
(匿名) #efa840ec
comment
2

題名の通り、値を変化させ続けることによってグラデーションの色を少しずつ変化させて、アニメーションの様にしたいのですがうまくできません。
やりたい事と教えて頂きたい事を分けていますが、合わせて教えて頂きたくお願い致します。

・やりたい事
1.描画の白い部分(描画が見えない部分)を上から下に少しずつ移動させたい。
2.白い部分が通過したら、通過した場所の色が元に戻るようしたい。
(下記ソースコード参照)

・教えて頂きたい事
1.addColorのオフセット値を少しずつ変化させる
2.同様にrgbの値を少しずつ変化させる
変化させたい値を変数とインクリメントを使用するというのが基本的な方法だと思うのですが、うまくできないのでご教示お願い致します。

下記は試みた事です。
addColorStopの場合
・offset値が0,1単位の為、インクリメントが使用出来ない
・対策としてfor文を使用して0.1単位で増加させようとしたが、描画に変化はない(白い部分が移動しない)
function drawFrame() {
let grad = context.createLinearGradient(250,400,320,700);
for(let i = 0; i
grad.addColorStop(0.3, 'rgb(204,0,0');
grad.addColorStop(i 'rgb(255,255,255)');
grad.addColorStop(0.9, 'rgb(204,0,0');
}
~~~~~~~~~~~~~~~~~~

rgb値の場合
・同様に下記にて変数とインクリメントを使用するがエラーが出る
rgb値は変数は使用出来ない?下記エラー参照
エラー内容:Javascript.js:10 Uncaught DOMException: Failed to execute 'addColorStop' on 'CanvasGradient': The value provided ('rgb(x,0,0') could not be parsed as a color.
(addColorStop'の実行に失敗しました:提供された値( 'rgb(x、0,0')を色として解析できませんでした。)
x = 1;
function drawFrame() {
let grad = context.createLinearGradient(250,400,320,700);
context.clearRect(0,0,WIDTH,HEIGHT);
grad.addColorStop(0.3, 'rgb(x,0,0');
grad.addColorStop(0.6, 'rgb(255,255,255)');
grad.addColorStop(0.9, 'rgb(x,0,0');

x = x++;

~~~~~~~~~~~~~~~~

ソースコード;

    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> 

person
(匿名) #efa840ec
comment
4

初めて投稿させて頂きます。

javascriptでcanvasでグラデーションの色が変化するアニメーションを作成しているのですが、HSLに関してよくわからないので教えて頂きたくお願い致します。

分からない点
・記述方法がわからない
・HSLがどの分類になるのかがわからない(関数なのか、オブジェクトなのか等)
下記ソースコードの記述を見ると関数だが、javascript HSLで検索しても記述方法や何に分類されるのか見つからなかった(検索の仕方が悪いかもしれませんが)

調べてわかった事は引数が3つあり、それぞれに当てはまる
hsl(色相, 彩度, 輝度)
色相 →rad or deg?
彩度 →100%
輝度 →50%
(値は下記ソースコードより)
基本はわかるのですが、rad or deg(これが色相?)の値だったり、その前後の+だったり、カンマ区切り部分の区切り方が不明だったりと記述方法がわかりません。

下記ソースコードは他の掲示板で教えてもらった記述方法です。
11行目:  var makeColor = () => 'hsl('+ rad + 'deg, 100%, 50%)';
書き方は関数だけど関数の基本的な書き方 var makecolor () => {}のような書き方でない

もう一つは下記ソースコードにはありませんが、
ctx = canvas.getContext("2d"),
HSLcolor = (d) => 'hsl('+ d + 'deg, 100%, 60%)';
getContext('2d')の後に連続で記述している。
HSLcolorの部分は自分で名前を作成した変数なのか、それとも別の物なのかがわからない

説明分かりづらく申し訳ございませんが、教えて頂きたくお願い致します。
再度、わからないこと
・HSLの記述方法がわからない
・このHSLというものは何に分類されるのか(関数?、オブジェクト?、etc)

<script>
    var line_canvas = document.getElementById("line"); 
    var line_ctx = line_canvas.getContext("2d");

function drawFrame() {
var makeColor = () => 'hsl('+ rad + 'deg, 100%, 50%)';
var grad = line_ctx.createLinearGradient(0,0,360,240);
line_ctx.clearRect(0, 0, 450, 450);
grad.addColorStop(0.0, makeColor(deg));
grad.addColorStop(1.0, makeColor(deg +30));

line_ctx.strokeStyle = grad;

    line_ctx.beginPath(); 
    line_ctx.moveTo(100,-100);
    line_ctx.lineTo(0,200);
    line_ctx.lineTo(100,200);
    line_ctx.lineTo(50,400);
    line_ctx.lineTo(200,150);
    line_ctx.lineTo(80,150);
    line_ctx.lineTo(67,0); 
    line_ctx.stroke(); 
    line_ctx.fillStyle = grad; 
    line_ctx.fill();   
}
 var deg = 0;
 setInterval(() => {
    rad = deg % 360;
    console.log(deg);
    drawFrame(deg++);
    },33);
  </script>

JavaScriptを用いて、あるサイト上から特定のGoogleカレンダー上の予定を確認、追加するプログラムを作ろうとして(予約システムのような感じです)
下記のようなソースを書いています。

取得は問題なくできていますが、予定追加がうまくできず、
どこをどのように修正したらよいかわからず困っております。
サンプルもなく、そもそもJavaScriptでできるのかすらわからないのですが・・・
同様の仕様を経験した方、わかる方がいらっしゃいましたらご教授願えませんでしょうか。

もしJSではできないのであれば、PHPでやってみようかと思っていますが…
PHPならできる、などあればご教授いただきたいです。

(function($) {
    $(function() {
        const API_KEY = [APIキー];
        const CALENDAR_ID = [カレンダーID];
        function start() {
            gapi.client.init({
                'apiKey': API_KEY,
            }).then(function() {
                return gapi.client.request({
                    'path': 'https://www.googleapis.com/calendar/v3/calendars/' + encodeURIComponent(CALENDAR_ID) + '/events'
                 })
            }).then(function(response) {
                let resultArea = document.getElementById('resultArea');
                let items = response.result.items;
                for(let i = 0; i < items.length; i++){
                resultArea.insertAdjacentHTML('beforeend', items[i].start.dateTime + '<br>');
                }
            }, function(reason) {
                console.log('Error: ' + reason.result.error.message);
            });
        };

        function addEvent() {
                        gapi.client.load('calendar', 'v3', function(){
                        var resource = {
                            'summary': $("#request_form .name").val(), // 予定のタイトル
                            'start': { // 開始日・時刻
                                'dateTime': $("#request_form .datetime_st").val();
                            },
                            'end': { // 終了日・時刻
                                'dateTime': $("#request_form .datetime_ed").val();
                            },
                            'location': 'Somewhere', // 場所
                            'description': $("#request_form .detail").val() // 説明
                        };
                        var request = gapi.client.calendar.events.insert({
                            'calendarId': CALENDAR_ID,
                            'resource': resource
                        });

                        console.log(resource);

                        request.execute(function(resp){
                        console.debug(resp);
                    });

                });
        };

        gapi.load('client', start);
        $("#request_form").on("submit", function(){
            addEvent();
        })
    });
})(jQuery);

実行するとコンソールに

cb=gapi.loaded_0:223
POST https://content.googleapis.com/calendar/v3/calendars/[カレンダーID]/events?alt=json&key=[APIキー] 401

と出ます。
request.executeができてないようです)


person
(匿名) #f5c9bb6f
comment
2

canvasについて質問です。テトリスを作っていたのですが、fillStyleとfillRectの表示順には何か意味があるのでしょうか?一度fillStyleの前にfillRectを書いていたのですが、それだとfillStyleが反映されませんでした。しかし、他のコードを見てみるとfillRectが先に書かれているものもあるので、余計にわからなくなりました。


JavaScript初心者です。
サイトのパーツとしてPCサイズではhover時に中の要素を出して、スマホサイズではclick時に中の要素をアコーディオンメニューのように出すことを実装しようとしているのですが、
windowのresizeでwidthを取得していifの分岐、など試してみてもresize前のイベントが消えなかったり、挙動がバグったりして困っています。

現状は一度諦めて下記のように記述して、サイズ変更の都度リロードしている状態です。
下記の記述をresizeしても正しく動作するにはどうすれば良いでしょうか。
ご指導頂けましたら幸いです。
何卒宜しくお願い申し上げます。

function switchByWidth() {
  if (window.matchMedia("(max-width: 767px)").matches) {

    // スマホサイズ アコーディオンメニュー
    $(function () {
      $("#header__menu01").on("click", function () {
        $(this).find("span").next().slideToggle(200);
      });
    });

  } else if (window.matchMedia("(min-width:768px)").matches) {

    // pcサイズホバーイベント
    $("#header__menu01").hover(
      function () {
        //カーソルが重なった時
        $(this).children(".flex-wrapper").addClass("open");
      },
      function () {
        //カーソルが離れた時
        $(this).children(".flex-wrapper").removeClass("open");
      }
    );

  }
}

window.onload = switchByWidth;
window.onresize = switchByWidth;

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');
    });
    .....

初歩的な質問で申し訳ございませんが、何卒ご指導の程宜しくお願い申し上げます。


textboxに文字を入力し、検索ボタンを押すと入力した文字がdocument部分に出力されるプログラムを作成しています。作成した以下のコードをブラウザ上で確認すると、コンソールにエラーが表示されます。

エラーの解消方法を教えてください。使用しているブラウザはClomeです。
発生するエラー

Uncaught TypeError: Cannot read property 'word' of null
    at HTMLFormElement.document.getElementById.onsubmit

ーーーーーーーーーーーーーーーーー
作成したコード

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>template</title>
<link href="../../_common/css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="header-contents">
<h1>タイトル</h1>
<h2>サブタイトル</h2>
</div><!-- /.header-contents -->
</header>
<div class="main-wrapper">
<section>
    <form action="#" id="form">
        <input type="text" name="word">
        <input type="submit" value="検索">
    </form>
    <p id="output"></p>
</section>
</div><!-- /.main-wrapper -->
<footer>JavaScript Samples</footer>
<script>
    'use strict';
    document.getElementById('form').onsubmit=function(event){
        event.preventDefault();
        const search= document.getElementById('from').word.value;
        document.getElementById('output').textContent=`「${search}」の検索中...`;
    };
</script>
</body>
</html>

person
(匿名) #5d424f07
comment
1
js

テンプレートリテラル「``」と「+」の違いが分かりません。
どちらも連結できるという事はわかるんですが
使い分けをする理由が良くわかりません
教えてください。
宜しくお願いします。

タグ

投稿月

最近コメントされた投稿