I am currently messing around with a game and i want to get an img tag to appear as a result in an input the same way i did with the Unicode character.
This is the array:
var wqV = [' ', '\u2613', "<img src='../images/o.png'>"];
here are the part of the code that sets the default as wqV[0], the user click will change it to wqV[1], and the AI is suppose to display wqV[2].
//listening to inputs and setting default value
inputs.forEach(function (myCl) { //myCl are the ids of the HTML
var ele, mdiv;
ele = UI.ById(myCl);
mdiv = document.createElement("div");
ele.addEventListener("click", UI.myTicFunc(myCl), false);
mdiv.innerHTML = wqV[0];
ele.value = (mdiv.textContent || mdiv.innerText);
});
// places wqV[1] anywhere the user clicks
myTicFunc: function (myCl) {
return function () {
var mdiv = document.createElement("div");
mdiv.innerHTML = wqV[1];
UI.ById(myCl).value = (mdiv.textContent || mdiv.innerText);
UI.myAI(myCl);
}
}
UI.myAI is the function that sets wqV[2] with a bunch of nested if statements kinda like this:
if (sq5.value === " ") {
sq5.value = wqV[2];
sq5.disabled = true;
}
I appreciate anyone who can spare the time to help me get that image to appear as a value.
[edit] Here is another approach i have tried. I created a new div then gave it an id. On my css i set the background image but it doesn't display still
var myimg;
myimg = document.createElement("div");
myimg.id = "cpId";
sq5.value = (myimg.textContent || myimg.innerText);
#cpId {
background-image: url('../images/o.png');
background-size:cover;
}
Here is another attempt i've tried, which someone in the comments already aluded to.
var mimg;
mimg = document.createElement("img");
mimg.src = wqV[2];
sq5.value = (mimg.textContent || mimg.innerText);
sq5.disabled = true;