ここから本文です

javascriptの質問です テキストボックスに書いた文字をボタンを押したら付箋とし...

dai********さん

2017/7/1318:06:09

javascriptの質問です
テキストボックスに書いた文字をボタンを押したら付箋として画面に表示させるプログラムを作りたいのですが、うまくいきません。ボタンを押しても表示されないです。

プログラム全文書いたのですが、間違いがわかりません。
よろしかったら教えていただけたら嬉しいです。

↓↓↓
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#memoArea{
background-color:#EEEEEE;
border:solid #999999 1px;
width:620px;
height:480px;
padding:10px;
}
.memo{
text-decoration:none;
color:#000000;
position:absolute;
left:50px;
top:80px;
border:solid #999999 1px;
width:180px;
height:40px;
padding:10px;
}
.yellow{
background-color:#FFFFCC;
}
.red{
background-color:#FFCCCC;
}
.green{
background-color:#CCFFCC;
}
form{
background-color:#CCCCCC;
border:solid #999999 1px;
width:620px;
padding:10px;
}
#trashArea{
background-color:#6699CC;
color:#FFFFFF;
border:dashed #333366 1px;
width:620px;
height:100px;
padding:10px;
}
</style>
<script>
offsetX=0;
offsetY=0;
var memoCurrentId=1;

function addMemo(){
//文字取得
var memoText=document.memo.value;
//色取得
var memoColor="yellow";

if(document.getElementById("memoY").checked){
memoColor="yellow";
}
if(document.getElementById("memoR").checked){
memoColor="red";
}
if(document.getElementById("memoG").checked){
memoColor="green";
}

var memoElement=document.createElement("a");
memoElement.href="#";

memoElement.id="memo"+memoCurrentId;

memoElement.className="memo "+memoColor;

memoElement.draggable=true;

memoElement.ondragstart=dragMemo;

memoElement.innerHTML=memoText;

var memoArea=document.getElementById("memoArea");

memoArea.appendChild(memoElement);

memoCurrentId++;

}
function dragMemo(event){
event.dataTransfer.setData("text",event.target.id);

var memoElement=document.getElementById(event.target.id);

offsetX=event.clientX-memoElement.offsetLeft;
offsetY=event.clientY-memoElement.offsetTop;
}

function dropMemo(event){
var id=event.dataTransfer.getData("text");

var memoElement=document.getElementById(id)

memoElement.style.left=event.clientX-offsetX+"px";
memoElement.style.top=event.clientY-offsetY+"px";
}

function dragOverMemo(event){
event.preventDefault();
}
</script>

</head>
<body>
<form>
<input type="text" name="memo" id="memoText" size="50" placeholder="メモを入力してください">
<input type="radio" name="memoColor" id="memoY" checked>黄色
<input type="radio" name="memoColor" id="memoR" >赤色
<input type="radio" name="memoColor" id="memoG" >緑色
<input type="button" value="付箋紙を貼る" onclick="addMemo()">
</form>
<div id="memoArea" onDragOver="dragOverMemo(event)" onDrop="dropMemo(event)"></div>
<div id="trashArea" ondragover="dragOverMemo(event)" ondrop="dropTrash(event)">ごみ箱</div>
</body>
</html>

コメント等書いてなくて申し訳ないです。
よろしくお願いいたします。

閲覧数:
45
回答数:
1
お礼:
250枚

違反報告

ベストアンサーに選ばれた回答

アバター

ID非公開さん

2017/7/1318:43:23

ブラウザの console 等でエラーがないか確認していますか?

確認してみれば56行目に
cannot read property 'value' of undefined
とエラーが出ているのが分かります。

undefined のオブジェクトには value といったプロパティはないよ、
といったエラーです。

次のように修正しましょう。
var memoText = document.forms[0].memo.value;

質問した人からのコメント

2017/7/14 02:02:01

ご回答ありがとうございます!
dreamweaverでのエラー確認しかしていませんでした。
これからはブラウザでもしっかりします。
ありがとうございました!

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる