时间戳

首页 > 解决方案 > 在单击 JS 初学者时从外部源替换图像

javascript - 在单击 JS 初学者时从外部源替换图像

问题描述

对 JS 来说相当新，试图为我工作的公司构建一个工具，当用户输入产品编号时，它可以从供应商网站上提取图像，下面的代码有些工作，但输入时图像不会被替换一个新号码。

HTML：

<input id='pCOde' placeholder='Code?'>
<button onclick='addImg()'> Click me </button>
<p id='hImg'></p>

Javascript：

const pCode = document.getElementById("pCode").value;

function addImg() {
    const img = new Image();
    img.src = 'https://SupplierWebsite/pics/' + pCode.value + '.JPG';
    document.getElementById('hImg').replaceWith(img);
    img.style.height = 'auto';
    img.style.width = '85%';
}

最终想从供应商网站提取更多数据，例如产品名称和价格，但这似乎更加棘手。

标签： javascripthtml

解决方案

如果您可以分享您希望从 pCode 获得什么样的价值，这将有所帮助。但是尝试使用它，它会起作用。

let pCode = document.getElementById("pCode").value;

function addImg() {
  var img = new Image();
            img.src = 
            `https://SupplierWebsite/pics/${pCode}.JPG`;
            document.getElementById('hImg').replaceWith(img);
            img.style.height = 'auto';
            img.style.width = '85%';
        }

推荐阅读