JavaScript

質問

自分は、初心者です。

クリックを押すと、右に文字を動かしなさいと言う問題が出ました。

CSSのデーターも渡されています。

どのように、プグラミングしたらよろしいでしょうか？

よろしくお願いします。

cssのデーターです。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
*{
font-family: arial,helvetica,sans-serif;
}
.odd{
margin: 0px auto;
padding: 10px;
background: #333;
color: #FF0;
}
.even{
margin: 0px auto;
padding: 10px;
background: #999;
color: #00F
}
h1{
margin: inherit auto;
text-align: center;
}
#source{
float: left;
width: 45%;
height: 100%;
display: inline-block;
border: 1px solid red;
}
#destination{
float: right;
width: 45%;
height: 100%;
display: inline-block;
border: 1px solid blue;
}
.wrapper{
height: 800px;
}
#buttonForm{
font-size: 20px;
text-align: center;
display: block;
margin: 0px auto 20px;
}
#button{
padding: 10px 15px;
font-size: 20px;
}
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

回答No.1

noname#247307

右に文字を動かしなさいって、図を見た感じでは、左側にある<textarea>のテキストを取り出して右側の<textarea>に設定する、ということでしょうか。

どうやればできるか、考えてみましたか。やり方を順に整理してみましょう。以下の点がわかれば、それを組み立てて処理が作れるはずです。

・ボタンをクリックして処理を実行するにはどうすればいいか。
・<textarea>をプログラム内で扱うにはどうすればいいか。
・左側の<textarea>のテキストはどうやってとりだせばいいか。
・右側の<textarea>のテキストはどうやって変更すればいいか。

・ボタンをクリックして処理を実行するには？
<button onclick="action();">というように、onclickに実行する関数を書きます。そして、こんな具合に関数を定義しておきます。

function action(){
……ここに実行する処理を書く……
}

・<textarea>をプログラムで扱うには？
例えば、<textarea id="area1">といった具合に、idというものに名前をつけておきます。そして、こんな具合にしてそのIDのオブジェクトを取り出します。

var obj = doument.getElementById("area1");

・<textarea>のテキストを操作するには？
上で取り出したオブジェクトのvalueという値を操作します。こんな具合です。

var str = obj.value; // objのテキストを取り出す
obj.value = "Hello"; // objのテキストを変更する

これらを組み立てれば、左側の<textarea>のテキストを右側に移動する、という処理が作れます。がんばってください。自分で考えてプログラムを作ってみて、うまく動かなければ再度質問して下さい。