如何返回一个对象图像文件并根据用户在JavaScript中的输入显示在弹出窗口中？

我目前正在使用纯JavaScript进行Pokedex项目。我接受用户输入，并将值“弱点”和“阻力”类型返回到该输入。我现在有一个显示文本的弹出窗口，但是类型对象都有一个链接到每个类型的图像文件。我只想在用户提交时显示图像而不是文本。帮忙

 <form class="main" id="main">

        <div class="segment">
            <h1>PokéDex v.2</h1>
        </div>

        <label>
            <input type="text" id="type-input" placeholder="Input Pokemon Type">
        </label>

        <button class="red" type="button submit" id="submit" value="Submit"><i class="icon ion-md-lock"></i>
            Search</button>

    </form>

    <div class="popup-wrapper">
        <div class="popup">
            <div class="popup-close">X</div>
            <div class="popup-content" id="content">
                <p>weakness: <span id="weakness">Error</span></p>
                <div id="weakImg"></div>
                <p>resistance: <span id="resistance">Error</span></p>
                <div id="resImg"></div>
            </div>
        </div>
    </div>

    <div class="pokemon" id="pokemon"></div>
    

神奇宝贝v.2
搜寻
X
缺点：错误

电阻：错误

const form=document.querySelector（“#main”）；
const blink=document.querySelector（“类型输入”）；
const button=document.querySelector（“提交”）；
常量标题=document.querySelector（“h1”）；
const popup=document.querySelector（“.popup包装器”）；
const close=document.querySelector（“.popup close”）；
常量弱点=document.getElementById（“弱点”）；
const resistance=document.getElementById（“resistance”）；
const weakImg=document.getElementById（“weakImg”）；
const resImg=document.getElementById（“resImg”）；
常量类型=[
{
类型：“正常”，
弱点：“战斗”，
抵抗：“无”，
imgFile:'icon set/icons/normal.svg'，
},
{
类型：“战斗”，
弱点：“飞翔，通灵，仙女”，
抵抗：“黑暗，岩石，虫子”，
imgFile:'icon set/icons/fighting.svg'，
},
{
类型：“飞行”，
弱点：“石头、电、冰”，
抵抗：“战斗，虫子，草”，
imgFile:'icon set/icons/flying.svg'，
},
{
类型：“毒药”，
弱点：“地面，心灵”，
抵抗：“战斗，毒药，虫子，草，仙女”，
imgFile:'icon set/icons/poison.svg'，
},
{
类型：“地面”，
弱点：“水、草、冰”，
抵抗：“毒药，石头”，
imgFile:'icon set/icons/ground.svg'，
},
{
类型：“岩石”，
弱点：“战斗，地面，钢铁，水，草”，
抵抗：“正常，飞行，毒药，火焰”，
imgFile:'icon set/icons/rock.svg'，
},
{
键入：“bug”，
弱点：“飞行，岩石，火焰”，
抵抗：“战斗，地面，草地”，
imgFile:'icon set/icons/bug.svg'，
},
{
类型：“鬼”，
弱点：“幽灵，黑暗”，
抵抗：“毒药，虫子”，
imgFile:'icon set/icons/ghost.svg'，
},
{
类型：“钢”，
弱点：“战斗，地面，火力”，
阻力：
“普通，飞行，岩石，虫子，钢铁，草，通灵，冰，龙，仙女”，
imgFile:'icon set/icons/steel.svg'，
},
{
类型：“火”，
弱点：“地面、岩石、水”，
抵抗：“虫子，钢铁，火，草，冰，仙女”，
imgFile:'icon set/icons/fire.svg'，
},
{
类型：“水”，
弱点：“草，电”，
阻力：“钢、火、水、冰”，
imgFile:'icon set/icons/water.svg'，
},
{
类型：“草”，
弱点：“飞行，毒药，虫子，火，冰”，
电阻：“地、水、草、电”，
imgFile:'icon set/icons/grass.svg'，
},
{
类型：“电动”，
弱点：“地面”，
电阻：“飞，钢，电”，
imgFile:'icon set/icons/electric.svg'，
},
{
类型：“通灵者”，
弱点：“虫子，鬼，黑暗”，
抵抗：“战斗，心灵”，
imgFile:'icon set/icons/psycholic.svg'，
},
{
类型：“冰”，
弱点：“战斗，岩石，钢铁，火”，
抵抗：“冰”，
imgFile:'icon set/icons/ice.svg'，
},
{
字体：“龙”，
弱点：“冰，龙，仙女”，
电阻：“火、水、草、电”，
imgFile:'icon set/icons/dragon.svg'，
},
{
类型：“黑暗”，
弱点：“战斗，虫子，仙女”，
抵抗：“幽灵，黑暗”，
imgFile:'icon set/icons/dark.svg'，
},
{
类型：“仙女”，
弱点：“毒、鬼、龙”，
抵抗：“战斗，虫子，黑暗”，
imgFile:'icon set/icons/fairy.svg'，
},
];
findType=（输入）=>{
设obj=types.find（（o）=>o.type==input）；
返回obj？obj.弱点：console.log（“错误”）；
};
findRes=（输入）=>{
让obj2=types.find（（o）=>o.type==input）；
返回obj2？obj2.resistance:console.log（“错误”）；
};
findImg=（输入）=>{
让objI=types.find（（o）=>o.type==input）；
返回objI？objI.imgFile:console.log（“未加载图像”）；
};
getImage=（输入）=>{
设img=新图像（）；
weakImg.innerHTML=img；
弱智儿童（img）；
}  
//如果我们动态地插入image元素，而不是删除html中的隐藏类，会怎么样？
//findType=（输入）=>{
//if（types.includes（`${input}`））{
//innerText=findType（输入）；
//  };
// };
//让结果=[]；
//事件侦听器
按钮。addEventListener（“单击”，（）=>{
//log（“你点击了我！”）；
//弹出窗口
popup.style.display=“block”；
blink.style.display=“无”；
});
close.addEventListener（“单击”，（）=>{
popup.style.display=“无”；
});
popup.addEventListener（“单击”，（）=>{
popup.style.display=“无”；
});
表格.附录列表（“提交”、（e）=>{
e、 预防默认值（）；
让输入=document.getElementById（“类型输入”）.value.toLowerCase（）.trim（）；
//让image=types.find（type=>type.imgFile）；
//console.log（图像）；
//获取图像（图像）；
//log（findType（输入））；
innerText=findType（输入）；
resistance.innerText=findRes（输入）；
//weakImg.innerHTML=`；
//popup.innerHTML=`${input}.classList.remove（“hide”）`；
form.reset（）；
blink.style.display=“block”；
});

在弹出窗口中添加img，并在出现时设置src。

---

简而言之，用您想要显示的元素的src更改img src。

您具体在哪里遇到问题？你实际上只确定了一个目标，但没有提到你的困境，也没有提到你需要别人的具体帮助。还请注意，在发布问题时，最少的代码是最好的。可能不需要30件

const form = document.querySelector("#main");
const blink = document.querySelector("#type-input");
const button = document.querySelector("#submit");
const heading = document.querySelector("h1");
const popup = document.querySelector(".popup-wrapper");
const close = document.querySelector(".popup-close");
const weakness = document.getElementById("weakness");
const resistance = document.getElementById("resistance");
const weakImg = document.getElementById("weakImg");
const resImg = document.getElementById("resImg");
const types = [
  {
    type: "normal",
    weakness: "fighting",
    resistance: "none",
    imgFile: 'icon-set/icons/normal.svg',
  },
  {
    type: "fighting",
    weakness: "flying, psychic, fairy",
    resistance: "dark, rock, bug",
    imgFile: 'icon-set/icons/fighting.svg',
  },
  {
    type: "flying",
    weakness: "rock, electric, ice",
    resistance: "fighting, bug, grass",
    imgFile: 'icon-set/icons/flying.svg',
  },
  {
    type: "poison",
    weakness: "ground, psychic",
    resistance: "fighting, poison, bug, grass, fairy",
    imgFile: 'icon-set/icons/poison.svg',
  },
  {
    type: "ground",
    weakness: "water, grass, ice",
    resistance: "poison, rock",
    imgFile: 'icon-set/icons/ground.svg',
  },
  {
    type: "rock",
    weakness: "fighting, ground, steel, water, grass",
    resistance: "normal, flying, poison, fire",
    imgFile: 'icon-set/icons/rock.svg',
  },
  {
    type: "bug",
    weakness: "flying, rock, fire",
    resistance: "fighting, ground, grass",
    imgFile: 'icon-set/icons/bug.svg',
  },
  {
    type: "ghost",
    weakness: "ghost, dark",
    resistance: "poison, bug",
    imgFile: 'icon-set/icons/ghost.svg',
  },
  {
    type: "steel",
    weakness: "fighting, ground, fire",
    resistance:
      "normal, flying, rock, bug, steel, grass, psychic, ice, dragon, fairy",
    imgFile: 'icon-set/icons/steel.svg',
  },
  {
    type: "fire",
    weakness: "ground, rock, water",
    resistance: "bug, steel, fire, grass, ice, fairy",
    imgFile: 'icon-set/icons/fire.svg',
  },
  {
    type: "water",
    weakness: "grass, electric",
    resistance: "steel, fire, water, ice",
    imgFile: 'icon-set/icons/water.svg',
  },
  {
    type: "grass",
    weakness: "flying, poison, bug, fire, ice",
    resistance: "ground, water, grass, electric",
    imgFile: 'icon-set/icons/grass.svg',
  },
  {
    type: "electric",
    weakness: "ground",
    resistance: "flying, steel, electric",
    imgFile: 'icon-set/icons/electric.svg',
  },
  {
    type: "psychic",
    weakness: "bug, ghost, dark",
    resistance: "fighting, psychic",
    imgFile: 'icon-set/icons/psychic.svg',
  },
  {
    type: "ice",
    weakness: "fighting, rock, steel, fire",
    resistance: "ice",
    imgFile: 'icon-set/icons/ice.svg',
  },
  {
    type: "dragon",
    weakness: "ice, dragon, fairy",
    resistance: "fire, water, grass, electric",
    imgFile: 'icon-set/icons/dragon.svg',
  },
  {
    type: "dark",
    weakness: "fighting, bug, fairy",
    resistance: "ghost, dark",
    imgFile: 'icon-set/icons/dark.svg',
  },
  {
    type: "fairy",
    weakness: "poison, ghost, dragon",
    resistance: "fighting, bug, dark",
    imgFile: 'icon-set/icons/fairy.svg',
  },
];

findType = (input) => {
  let obj = types.find((o) => o.type == input);
  return obj ? obj.weakness : console.log("Error");
};

findRes = (input) => {
  let obj2 = types.find((o) => o.type == input);
  return obj2 ? obj2.resistance : console.log("Error");
};

findImg = (input) => {
  let objI = types.find((o) => o.type == input);
  return objI ? objI.imgFile : console.log("No Image Loaded");
};

getImage = (input) => { 
  let img = new Image(); 
  weakImg.innerHTML =  img;
  weakImg.appendChild(img); 
}  


// what if we dynamically insert the image element instead of removing a hidden class in the html?







// findType = (input) => {
//  if( types.includes(`${input}`)){
//   weakness.innerText = findType(input);
//  };
// };

// let results = [];

// Event Listeners

button.addEventListener("click", () => {
  //   console.log("You clicked me!");
  //popup
  popup.style.display = "block";
  blink.style.display = "none";
});

close.addEventListener("click", () => {
  popup.style.display = "none";
});

popup.addEventListener("click", () => {
  popup.style.display = "none";
});

form.addEventListener("submit", (e) => {
  e.preventDefault();
  let input = document.getElementById("type-input").value.toLowerCase().trim();
  // let image = types.find(type => type.imgFile);
  // console.log(image);
  // getImage(image);

  
  

  // console.log(findType(input));
  weakness.innerText = findType(input);
  
  resistance.innerText = findRes(input);

  // weakImg.innerHTML = `<img src="${input.image}" />` ;

  // popup.innerHTML = `${input}.classList.remove("hide")`;

  form.reset();
  blink.style.display = "block";
});