1日1回引けるJavaScriptおみくじについて

JavaScriptが調べてもわからず、どうか教えて頂けないでしょうか？
画像をリンクに変えたいです。

var unList=[
{url:'#' , title:'大吉'},
{url:'#' , title:'中吉'},
{url:'#' , title:'小吉'},
];
for(var i=0; i<unList.length; i++){
document.write("<a href=",unList[i].url,">",unList[i].title,"</a>");}

上記に変更したところ
ボタンを押す前に結果（リンク）が左上に飛び出してしまい困っています。
参考にしたソース↓
<form action="#">
<div>
<h2>ここに運勢が表示される</h2>
<img src="●.png" id="un" alt="ここに運勢が表示される"><br>
<input type="button" value="今日の一枚" onClick="omikuji(document.getElementById ('un'));">
</div>
</form>

<script>
var omikuji = (function (getCookie, setCookie) {
var save = 31;
var unList = [
{ src: '1.png', alt: '大吉' },
{ src: '2.png', alt: '吉' },
];

return function (node) {
var d = node.ownerDocument;
var v = d./*@cc_on @if (1) parentWindow @else@*/ defaultView /*@end@*/;

var today = (new Date).getDate () + '';
var lastDay = getCookie.call (v, 'day');
var unsei;
var no;

if (today === lastDay)
unsei = unList [Number (getCookie.call (v, 'un'))];

else {
no = Math.floor (Math.random() * unList.length);
unsei = unList[no];
setCookie.call (v, 'day', today, save);
setCookie.call (v, 'un', String (no), save);
}

node.src = unsei.src;
node.alt = unsei.alt;
};
})(
function () {
return (function (name) {
var d = this.document;
var n = encodeURIComponent (name).replace (/([.*()])/g, '\\$1');
var v = d.cookie.match (RegExp (n + '\\s*=\\s*(.*?)(?:[\\s;,]|$)'));
return v ? decodeURIComponent (v[1]) : '';
}).apply (this, arguments);
},

function () {
return (function (name, value, day, path, domain) {
var d = this.document;
var t = new Date;
t.setDate (t.getDate () + (day || 0));
d.cookie = encodeURIComponent (name) + '=' + encodeURIComponent (value) + ';' +
'expires=' + t.toUTCString () + ';' +
(path ? 'path=' + encodeURIComponent (path) + '': '') +
(domain ? 'domain=' + encodeURIComponent (domain) + ';': '');
}).apply (this, arguments);
});

</script>

No.1 ベストアンサー 回答者： Ogre7077 回答日時： 2022/12/13 11:05

事前に表示させる場所を用意すること

例) 画像 <img id=un> の代わりに段落 <div id=fortune></div> を用意

表示させる位置の親要素を取ること
例) var 親要素 = document.getElementById('fortune');

document.write ではなく
document.createElement / 親要素.appendChild
または 親要素.innerHTML を使うこと
https://developer.mozilla.org/ja/docs/Web/API/Do …
https://developer.mozilla.org/ja/docs/Web/API/No …
https://developer.mozilla.org/ja/docs/Web/API/El …

ボタン押した後に動く関数 omikuji の中で処理すること

この回答へのお礼

Ogre7077様

ありがとうございました。
調べながら格闘していたので、大変助かりました。
頂いた内容を確認しながら行ってみます。

お礼日時：2022/12/13 14:28