質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

解決済

dotエディターを作りたいのですが...

himasouna_hito
himasouna_hito

総合スコア1

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1回答

0評価

1クリップ

177閲覧

投稿2022/04/29 07:40

現在dot絵エディターを作っているのですが、色変更のためにプログラムを組んだところ、
Uncaught TypeError: Cannot read properties of null (reading 'style')
と出て来ます。
どうすればいいのでしょうか。

  • やってみた解決法

関数の場所を入れ替える

ソースコード:

dot.html

<html> <head> <script type="text/javascript"> var cnt = 0; function save(savetext) { var blob = new Blob([savetext],{type:'text/plain'}); var link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.download = 'savefile.plat'; link.click(); } function inputclick(){ document.getElementById('upload').click(); } </script> </head> <body style="background-color:#dddddd;"> <style> .event_table tr td:hover {background-color: #d9efff;} .event_table {cursor: pointer; user-select: none} .save { background-image: url('https://uploda1.ysklog.net/uploda/360cebe7b5.jpg'); width: 120px; height: 70px; cursor: pointer; } .load { background-image: url('https://uploda1.ysklog.net/uploda/bba2c0d83a.jpg'); width: 120px; height: 70px; cursor: pointer; } label> input { top: 1000px; left: 1000px; display:none; } </style> <button onclick="save('120000102000120')" class='save'"></button> <button onclick="inputclick()" class='load'"></button> <label for="file_upload"><input type="file" id="upload" accept=".plat" /></label> <table bgcolor="#ffffff" class="event_table" cellspacing="0"> <tr> <td id="td2" id="1" onclick="peint('1')">   </td><td id="td2" id="2" onclick="peint('2')">   </td><td id="td2" id="3" onclick="peint('3')">   </td><td id="td2" id="4" onclick="peint('4')">   </td><td id="td2" id="5" onclick="peint('5')">   </td><td id="td2" id="6" onclick="peint('6')">   </td><td id="td2" id="7" onclick="peint('7')">   </td><td id="td2" id="8" onclick="peint('8')">   </td><td id="td2" id="9" onclick="peint('9')">   </td><td id="td2" id="10" onclick="peint('10')">   </td> </tr> <tr> <td id="td2" id="11" onclick="peint('11')">   </td><td id="td2" id="12" onclick="peint('12')">   </td><td id="td2" id="13" onclick="peint('13')">   </td><td id="td2" id="14" onclick="peint('14')">   </td><td id="td2" id="15" onclick="peint('15')">   </td><td id="td2" id="16" onclick="peint('16')">   </td><td id="td2" id="17" onclick="peint('17')">   </td><td id="td2" id="18" onclick="peint('18')">   </td><td id="td2" id="19" onclick="peint('19')">   </td><td id="td2" id="20" onclick="peint('20')">   </td> </tr> <tr> <td id="td2" id="21" onclick="peint('21')">   </td><td id="td2" id="22" onclick="peint('22')">   </td><td id="td2" id="23" onclick="peint('23')">   </td><td id="td2" id="24" onclick="peint('24')">   </td><td id="td2" id="25" onclick="peint('25')">   </td><td id="td2" id="26" onclick="peint('26')">   </td><td id="td2" id="27" onclick="peint('27')">   </td><td id="td2" id="28" onclick="peint('28')">   </td><td id="td2" id="29" onclick="peint('29')">   </td><td id="td2" id="30" onclick="peint('30')">   </td> </tr> <tr> <td id="td2" id="31" onclick="peint('31')">   </td><td id="td2" id="32" onclick="peint('32')">   </td><td id="td2" id="33" onclick="peint('33')">   </td><td id="td2" id="34" onclick="peint('34')">   </td><td id="td2" id="35" onclick="peint('35')">   </td><td id="td2" id="36" onclick="peint('36')">   </td><td id="td2" id="37" onclick="peint('37')">   </td><td id="td2" id="38" onclick="peint('38')">   </td><td id="td2" id="39" onclick="peint('39')">   </td><td id="td2" id="40" onclick="peint('40')">   </td> </tr> <tr> <td id="td2" id="41" onclick="peint('41')">   </td><td id="td2" id="42" onclick="peint('42')">   </td><td id="td2" id="43" onclick="peint('43')">   </td><td id="td2" id="44" onclick="peint('44')">   </td><td id="td2" id="45" onclick="peint('45')">   </td><td id="td2" id="46" onclick="peint('46')">   </td><td id="td2" id="47" onclick="peint('47')">   </td><td id="td2" id="48" onclick="peint('48')">   </td><td id="td2" id="49" onclick="peint('49')">   </td><td id="td2" id="50" onclick="peint('50')">   </td> </tr> <tr> <td id="td2" id="51" onclick="peint('51')">   </td><td id="td2" id="52" onclick="peint('52')">   </td><td id="td2" id="53" onclick="peint('53')">   </td><td id="td2" id="54" onclick="peint('54')">   </td><td id="td2" id="55" onclick="peint('55')">   </td><td id="td2" id="56" onclick="peint('56')">   </td><td id="td2" id="57" onclick="peint('57')">   </td><td id="td2" id="58" onclick="peint('58')">   </td><td id="td2" id="59" onclick="peint('59')">   </td><td id="td2" id="60" onclick="peint('60')">   </td> </tr> <tr> <td id="td2" id="61" onclick="peint('61')">   </td><td id="td2" id="62" onclick="peint('62')">   </td><td id="td2" id="63" onclick="peint('63')">   </td><td id="td2" id="64" onclick="peint('64')">   </td><td id="td2" id="65" onclick="peint('65')">   </td><td id="td2" id="66" onclick="peint('66')">   </td><td id="td2" id="67" onclick="peint('67')">   </td><td id="td2" id="68" onclick="peint('68')">   </td><td id="td2" id="69" onclick="peint('69')">   </td><td id="td2" id="70" onclick="input('70')">   </td> </tr> </table> <span id="go"></span> </body> <script> let input = document.getElementById('upload'); let reader = new FileReader(); var loading; input.addEventListener('change', () => { for(file of input.files){ reader.readAsText(file, 'UTF-8'); reader.onload = ()=> { console.log(reader.result); }; } }); function peint(場所){ var element = document.getElementById(場所); //問題部分 element.style.backgroundColor = '#0000ff'; } </script> </html>

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。