創建基於用戶的姓

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>