使用複選框以選擇哪個陣列（S）從在JavaScript

在撥弄選擇一個隨機值：使用複選框以選擇哪個陣列（S）從在JavaScript

兩個隨機選擇（每個陣列）是在點擊Go按鈕給出。

我的問題：

我想用複選框（或類似），以確定哪些值應該是隨機的，哪些應該被「拯救」。

實施例：

按此轉到
'2' & '6' 中給出
蜱下 '2' 至 '保存' 的值
再次單擊轉到一個複選框
2仍然是，第二個值現在是4

HTML：

<input class="btn" type="button" id="btnSearch" value="Go" onclick="GetValue();" /> 
<p id="message1" >Random</p> 
<p id="message2" >Random</p>

JS：

function GetValue() 
{ 
var myarray1 = new Array("1","2","3"); 
var myarray2 = new Array("4","5","6"); 
var random1 = myarray1[Math.floor(Math.random() * myarray1.length)]; 
var random2 = myarray2[Math.floor(Math.random() * myarray2.length)]; 
document.getElementById("message1").innerHTML=random1; 
document.getElementById("message2").innerHTML=random2; 
}

示例被完全去掉背部爲了簡化;我會在更大的範圍內使用它。

任何幫助，將不勝感激！在此先感謝。

來源

2017-08-06 MISQ

也許這樣嗎？我改變了一點HTML，有一個額外的<span>來保存隨機值，並在每個複選框之前添加一個<input type="checkbox" />。

最終，我只是使用複選框從document.querySelectorAll的結果集中排除範圍，當它不是:not(:checked)時。因此，只有span被處理，而不是在複選框之前。然後，爲這個跨度，分配一個隨機值。

我也提取了隨機值到一個函數中的選擇，該函數僅在實際需要值時調用。每個跨度的data-message-id將跨度與隨機數組關聯起來，隨機數組放入自己的數組中以便進行基於索引的訪問。因此，對於data-message-id="1"，randomArr[0]被訪問等。

請不要猶豫，問如果有什麼不清楚。

function GetValue() 
 
{ 
 
    var myarray1 = new Array("1","2","3"); 
 
    var myarray2 = new Array("4","5","6"); 
 
    
 
    const randomArr = [myarray1, myarray2]; 
 
    
 
    Array.prototype.slice.call(document.querySelectorAll(".message > input[type='checkbox']:not(:checked) + span")) 
 
    .forEach(function (elem) { 
 
    const id = parseInt(elem.dataset.messageId); 
 
    elem.innerHTML = random(randomArr[id - 1]); 
 
    }); 
 
} 
 

 
function random (arr) { 
 
    return arr[Math.floor(Math.random() * arr.length)] 
 
}

<input class="btn" type="button" id="btnSearch" value="Search" onclick="GetValue();" /> 
 
<p id="message1" class="message"> 
 
    <input type="checkbox"> 
 
    <span data-message-id="1">Random</span> 
 
</p> 
 
<p id="message2" class="message"> 
 
    <input type="checkbox" /> 
 
    <span data-message-id="2">Random</span> 
 
</p>

來源

2017-08-06 11:46:49 SVSchmidt

這是偉大的，感謝您的快速回復！我是JS的新手，所以我實際上並不瞭解很多，但它完全符合我的要求！我認爲它是可擴展的？ – MISQ

@MISQ很高興能幫到你。它應該可以輕鬆擴展。例如，這就是爲什麼我引入'data-message-id'屬性，創建一個包裝數組並提取隨機函數的原因。如果您不明白代碼的任何特定部分，請詢問。（另外，如果你對我的回答贊成/接受了，如果對你有幫助的話，我會很高興）。 – SVSchmidt

我現在明白了，我有機會與它合作。它到目前爲止效果很好，比我之前使用的代碼更高效 - 再次感謝！很好的幫助。（接受，但不能upvote作爲低代表！） – MISQ

只需添加一個選擇：

<select id="choose"> </select>

然後創建陣列的二維陣列可供選擇：

var arrays = [ 
    [1,2,3,4], 
    [5,6,7,8] 
];

然後添加兩個選項的選擇：

var select = document.getElementById("choose"); 
arrays.forEach(function(_,i){ 
select.innerHTML += 
    `<option value="${i}" > ${i} </option>`; 
});

因此，現在選擇包含每個數組索引作爲選項，現在準備做的事：

function getRandom(){ 
    var array = arrays[ select.selectedIndex ]; 
    var result = array[Math.floor(Math.random()*array.length)]; 
}

In action

來源

2017-08-06 11:46:05

使用複選框以選擇哪個陣列（S）從在JavaScript

回答

相關問題