如何使用javascript顯示圖像

如何顯示圖像的次數與用戶在html中使用javascript給出的輸入（數字）一樣多？我的代碼似乎有錯誤，不知道如何糾正。如何使用javascript顯示圖像

<!DOCTYPE html> 
 
<html> 
 
<body> 
 

 
<p>Click the button to add a new element to the array.</p> 
 
<input type="number" id="myNumber" value=""> 
 
<button onclick="imag(c,x)">Try it</button> 
 

 

 
<p id="demo"></p> 
 

 
<script> 
 
function imag(c,x) { 
 
var x = document.getElementById("myNumber").value; 
 
var c="<img src='C:/Users/Akhil/Desktop/New folder/G.jpg'/>"; 
 
    
 
    var arr = []; 
 
    for (var i = 0; i < x; i++) { 
 
    arr.push(c); 
 
    
 
    document.getElementById("demo").innerHTML = arr; 
 

 
} 
 
} 
 

 

 
</script> 
 

 
</body> 
 
</html>

來源

2015-04-05 mohit

你收到了什麼錯誤？什麼不起作用？ – Alex 2015-04-05 09:18:54

@Alex當我在文本框中輸入一個數字並點擊'嘗試它'按鈕，沒有任何迴應。沒有顯示。代碼是否正確？邏輯和語法明智 – mohit 2015-04-05 09:26:01

的.innerHTML屬性需要一個字符串。所以，你需要將數組轉換爲一個字符串像這樣：

document.getElementById("demo").innerHTML = arr.join("");

注意'C:/Users/Akhil/Desktop/New folder/G.jpg'通常不是一個有效的URL來引用您的圖像，因此您可能需要修復這一點。你可以在這裏閱讀，看文件的URL是如何工作的：http://en.wikipedia.org/wiki/File_URI_scheme

而且，沒有理由來傳遞兩個空變量的imag()功能。你可以改變這一點：

<button onclick="imag(c,x)">Try it</button>

這樣：

<button onclick="imag()">Try it</button>

來源

2015-04-05 09:18:58 jfriend00

棒極了。有效。謝謝。還有一件事，是否可以在每個圖像下方顯示一個差異數字。在第一個圖像'1'和第二個圖像'2'之下？ – mohit 2015-04-05 11:29:17

@mohit - 是的，這是可能的。您必須創建正確的HTML來進行顯示。如果在嘗試自己提供正確的HTML之後，您需要幫助，我建議您在新問題中描述問題以及您嘗試的內容。 – jfriend00 2015-04-05 17:05:36

首先，你叫imag功能與c和x，但代碼不知道他們什麼。這就是爲什麼你會得到TypeError。您應該爲按鈕的click事件創建事件處理程序，而不是此內聯處理程序，您可以在x和c的值處傳遞任何您喜歡的內容。

入住這花掉here

最後，innerHTML屬性需要一個字符串（HTML或純文本）。但在這種情況下，它會加入所有值，逗號分隔，因爲數組的toString方法被調用。參考here

來源

2015-04-05 09:23:10 gdyrrahitis

您的變量x和c未定義，它沒有任何內容，因此您的代碼中斷。這是參數是如何工作的，你給他們一個值，並將其傳遞給函數，所以C變成「你好」和x變成5，fiddle：

<p>Click the button to add a new element to the array.</p> 
<input type="number" id="myNumber" value=""> 
<button onclick="imag('hello',5)">Try it</button> 


<p id="demo"></p>

的Javascript

但這不是非常靈活的權利？所以你的解決方案已經在其他答案中說明了。您不必傳入參數並在每次單擊該按鈕時在該功能中設置變量，並請使用內聯調用停止。這真的是過時的，雜亂和不必要的！瞭解如何使用事件處理程序。

來源

2015-04-05 09:28:39 Michelangelo

試試這個：我只是改變了<button onclick="imag(c,x)">Try it</button>到<button onclick="imag()">Try it</button>

<!DOCTYPE html> 
<html> 
<body> 

<p>Click the button to add a new element to the array.</p> 
<input type="number" id="myNumber" value=""> 
<button onclick="imag()">Try it</button> 


<p id="demo"></p> 

<script> 
function imag() { 
    var x = document.getElementById("myNumber").value; 
    var c = '\<img src="http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2014/4/11/1397210130748/Spring-Lamb.-Image-shot-2-011.jpg"\/\>'; 

    var arr = []; 
    for (var i = 0; i < x; i++) { 
    arr.push(c); 

    document.getElementById("demo").innerHTML = arr; 

    } 
} 


</script> 

</body> 
</html>

通知;和我在這裏切換你的撇號：var c="<img src='C:/Users/Akhil/Desktop/New folder/G.jpg'/>";

你告訴javascript imag（）應該得到兩個變量。但是你從來沒有給過這個函數實際的變量（並且你在函數中填充了它們）。所以我從函數的減速中刪除了變量。

我做的第二件事是更改引號和撇號，因爲HTML標準需要標記內容的引號。它們之間的切換允許您保持HTML標準。

希望這有助於！

來源

2015-04-05 09:56:41 Thatkookooguy

如何使用javascript顯示圖像

回答

相關問題