根据用户的姓氏创建三个图像

Question

我想将用户输入的名称更改为 3 位数字 (000-999)，然后根据给定的数字显示 3 个图像。

如果生成的数字是 015，那么显示的第一个图像是 000.jpg，第二个是 010.jpg，第三个是 005.jpg。每次输入名称时，我都希望得到相同的结果，如果可能的话，我想实时更新。我希望这有助于解决问题，我仍在尝试找出最好的方法。谢谢

目的是创建一个由 3 幅图像组成的插图，这些图像组合在一起、混合和匹配风格。

这是我目前所拥有的：http://jsfiddle.net/x19mLe73/

理想情况下，我希望用户输入他们的姓名和图像以更改为相应的数字。

function doSomeStuff() {

    document.getElementById("LastName").text = "Connor"; // Simulate User Input
    var lastName = document.getElementById("LastName").text;
    var myPics = document.getElementById("myPics");

    var sum = 0;
    for(var i=0; i<lastName.length;i++)
    {
      sum += lastName.charCodeAt(i);
    }

    sum = (sum%1000);
    var firstPic = (sum + "").split('')[0] + "00.jpg";
    var secondPic = "0" + (sum + "").split('')[1] + "0.jpg";
    var thirdPic = "00" + (sum + "").split('')[2] + ".jpg";

    var imgToAdd1 = document.createElement("img");
    imgToAdd1.src = firstPic;
    imgToAdd1.alt = firstPic;
    myPics.appendChild(imgToAdd1);

    var imgToAdd2 = document.createElement("img");
    imgToAdd2.src = secondPic;
    imgToAdd2.alt = secondPic;
    myPics.appendChild(imgToAdd2);

    var imgToAdd3 = document.createElement("img");
    imgToAdd3.src = thirdPic;
    imgToAdd3.alt = thirdPic;
    myPics.appendChild(imgToAdd3);
}

doSomeStuff();

Answer 1

我通过将您的 .value 分配更改为 .text 使其工作。图像仍会损坏，但现在它们指向正确的 3 位数文件名。

window.doSomeStuff = function() {

    var lastName = document.getElementById("LastName").value;
    var myPics = document.getElementById("myPics");

    var sum = 0;
    for (var i = 0; i < lastName.length; i++) {
        sum += lastName.charCodeAt(i);
    }

    sum = (sum % 1000);
    var firstPic = (sum + "").split('')[0] + "00.jpg";
    var secondPic = "0" + (sum + "").split('')[1] + "0.jpg";
    var thirdPic = "00" + (sum + "").split('')[2] + ".jpg";

    myPics.innerHTML = "";
  
    var imgToAdd1 = document.createElement("img");
    imgToAdd1.src = firstPic;
    imgToAdd1.alt = firstPic;
    myPics.appendChild(imgToAdd1);

    var imgToAdd2 = document.createElement("img");
    imgToAdd2.src = secondPic;
    imgToAdd2.alt = secondPic;
    myPics.appendChild(imgToAdd2);

    var imgToAdd3 = document.createElement("img");
    imgToAdd3.src = thirdPic;
    imgToAdd3.alt = thirdPic;
    myPics.appendChild(imgToAdd3);

}

img {
    border: 1px;
    width: 200px;
    height: 20px;    
}

<input id="LastName" value="Connor" />
<div id="myPics">
</div>
<button onclick="doSomeStuff();" >Go</button>