JSで新しい要素を追加したら前の要素を消したい

最近プログラミングを始めた初心者です。
Javascriptでランダムに画像と文字を表示したいです。それぞれの関数に画像と文字を入れ、ランダム関数で一つずつそれらの関数を呼び出しています。ランダムに呼び出すことには成功したのですが、新しく呼び出すごとに前の関数(画像)が残ったままになります。具体的には

画像をクリックしたらランダムで他の画像が表示してほしい。
↓
ランダムには呼び出せたが前の画像が画面に残ったまま
↓
新しい画像を呼び出したら前のは消したい。

わかりずらくてすいません。ソースを張っておくのでどなたか教えていただけると助かります。

function z(){
funcName=["a","b"];

n = Math.floor(Math.random()*funcName.length);
eval(funcName[n])();

}

function a(){
document.write('<a href="#" onclick="z()"><img src="2016-06-18 19.46.54.jpg"/></a>'); document.write("aaa");}
function b()
{
document.write('<a href="#" onclick="z()"><img src="2016-06-18 19.46.54.jpg"/></a>'); document.write("vvvv");}

</script> <style> img {width:100%;} </style> </body> </html>

masaya_ohashi

2016/06/20 06:29

質問タイトルと質問内容が一致していないと思います。タイトルを修正してはいかがでしょうか。

suarez777

2016/06/20 06:32

修正しました

masaya_ohashi

2016/06/20 06:33

修正ありがとうございます。が、関数、というのは認識が誤っていると思います。あなたがやりたいことは「JSで新しい要素を追加したら前の要素を消したい」だと思います。

suarez777

2016/06/20 06:35

ご指摘ありがとうございます

kei344

2016/06/20 08:06

コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。

kei344

2016/06/21 02:34

まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。

行動規範の内容に同意します

回答2件

できるだけ原型とどめた上でのご参考。

javascript
1function a(){ 
2document.open();
3document.write('<a href="#" onclick="z()"><img src="2016-06-18 19.46.54.jpg"/></a>'); document.write("aaa");
4document.close();}
5function b() 
6{ 
7document.open();
8document.write('<a href="#" onclick="z()"><img src="2016-06-18 19.46.54.jpg"/></a>'); document.write("vvvv");
9document.close();}

投稿2016/06/20 06:30

編集2016/06/20 06:33

t.kawaji

総合スコア160

function a、及びfunction bで追加するaタグにidを割り当てておいて、あとから削除するという方法を取れば良いと思います。

Javascript
1// 削除処理
2function deleteInsertTag() {
3    var insertTag = document.getElementById("insertTag");
4    if(insertTag) {
5        insertTag.parentNode.removeChild(insertTag);
6    }
7}
8function a() {
9    deleteInsertTag();
10    // aタグにinsertTagというIDを振っておく
11    document.write('<a id="insertTag" href="#" onclick="z()"><img src="2016-06-18 19.46.54.jpg"/></a>'); document.write("aaa");
12} 
13function b() {
14    deleteInsertTag();
15    // aタグにinsertTagというIDを振っておく
16    document.write('<a id="insertTag" href="#" onclick="z()"><img src="2016-06-18 19.46.54.jpg"/></a>'); document.write("vvvv");
17}