I have two related divs (an image and its corresponding label) that a user can fill in one of two ways: by either 1) selecting the image directly or 2) clicking a "random" button that selects from an array.(我有两个相关的div（图像及其对应的标签），用户可以用以下两种方式之一填充：通过1）直接选择图像或2）单击从数组中选择的“随机”按钮。)
HTML for the divs that get filled ("#currentLabelA" and "#currentRhythm_A"):(用于填充的div的HTML（“＃currentLabelA”和“ #currentRhythm_A”）：)
<div class="currentSelection">
<div class="selectedLabelA" id="currentLabelA">A</div>
<div class="selectedRhythm currentRhythm_A" id="currentRhythm_A"><img src="../images/RM-0.1.png" width="172" height="60" alt="0-1" /></div>
</div>
The first way to fill the divs is by clicking the label of the image to select it (there are many more choices, almost 100; I'm abridging it to 3 here).(填充div的第一种方法是单击图像的标签将其选中（还有很多选择，几乎是100；在这里将其缩写为3）。) This fills #currentLabelA with the name of the rhythm and #currentRhythm_A with the image of the rhythm:(这会用节奏的名称填充#currentLabelA，并用节奏的图像填充#currentRhythm_A：)
<div class="tabbertab">
<h3>3</h3>
<section class="allRhythms">
<h6>Tap play to listen. Tap number to select.</h6>
<div class="RM_rhythm">
<audio id="3.1" preload='none'>
<source src='../audio/3.1.mp3' type='audio/mpeg' /><source src='../audio/3.1.ogg' type='audio/ogg' />
</audio>
<button onclick="document.getElementById('3.1').play()"><i class="fas fa-play"></i></button>
<a href="#" class="button">3-1</a>
<img src="../images/RM-3.1.png" width="172" height="60" alt="3-1">
</div>
<div class="RM_rhythm">
<audio id="3.2" preload='none'>
<source src='../audio/3.2.mp3' type='audio/mpeg' /><source src='../audio/3.2.ogg' type='audio/ogg' />
</audio>
<button onclick="document.getElementById('3.2').play()"><i class="fas fa-play"></i></button>
<a href="#" class="button">3-2</a>
<img src="../images/RM-3.2.png" width="172" height="60" alt="3-2">
</div>
<div class="RM_rhythm">
<audio id="3.3" preload='none'>
<source src='../audio/3.3.mp3' type='audio/mpeg' /><source src='../audio/3.3.ogg' type='audio/ogg' />
</audio>
<button onclick="document.getElementById('3.3').play()"><i class="fas fa-play"></i></button>
<a href="#" class="button">3-3</a>
<img src="../images/RM-3.3.png" width="172" height="60" alt="3-3">
</div>
</section>
</div><!-- end this tab -->
The alternate way to fill the divs is by clicking the "Random A" button:(填充div的另一种方法是单击“随机A”按钮：)
<input type="button" id="btnSearchA" class="btn btn-2 btn-2c" value="Random A" onclick="GetValueA();" />
<p id="message" style="display:none!important;"></p>
Here's the javascript for filling the divs in these two different ways:(这是通过这两种不同方式填充div的javascript：)
<!-- fill currentRhythm_A -->
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('.button').on('click', function() {
var imagewanted = $(this).closest('.RM_rhythm').find('img').attr("src");
$('.currentRhythm_A').html("<img src='" + imagewanted + "' />");
var currentlabel = $(this).closest('.RM_rhythm').find('audio').attr("id");
$('#currentLabelA').html(currentlabel);
$('#playA').html("<source src='../audio/" + currentlabel + ".mp3' type='audio/mpeg' /><source src='../audio/" + currentlabel + ".ogg' type='audio/ogg' />");
$('#playA').load();
});
});
</script>
<!-- generate a random rhythm for A -->
<script>
function GetValueA(){
var myarray= new Array("0.1","1.1","2.1","2.2","2.3","2.4","2.5","2.6","2.7","2.8","2.9","2.10","2.11","2.12","2.13","2.14","2.15","3.1","3.2","3.3","3.4","3.5","3.6","3.7","3.8","3.9","3.10","3.11","3.12","3.13","3.14","3.15","4.1","4.2","4.3","4.4","4.5","4.6","4.7","4.8","4.9","4.10","4.11","4.12","4.13","4.14","4.15","5.1","5.2","5.3","5.4","5.5","5.6","5.7","5.8","5.9","5.10","5.11","5.12","5.13","5.14","5.15","6.1","6.2","6.3","6.4","6.5","6.6","6.7","6.8","6.9","6.10","6.11","6.12","6.13","6.14","6.15");
var random = myarray[Math.floor(Math.random() * myarray.length)];
//alert(random);
document.getElementById("message").innerHTML=random;
$('.currentRhythm_A').html("<img src='../images/RM-" + random + ".png' />");
$('#currentLabelA').html(random);
$('#playA').html("<source src='../audio/" + random + ".mp3' type='audio/mpeg' /><source src='../audio/" + random + ".ogg' type='audio/ogg' />");
$('#playA').load();
$('input:checkbox').removeAttr('checked');
}
</script>
I am trying to figure out how to store these images/labels in local storage.(我试图弄清楚如何将这些图像/标签存储在本地存储中。) I know I need to do something like this for both #currentLabelA and #currentRhythm_A:(我知道我需要对#currentLabelA和#currentRhythm_A做类似的事情：)
var A = document.getElementById("currentLabelA");
localStorage.setItem("currentLabelA", A.innerHTML);
currentLabelA.innerHTML = localStorage.getItem("currentLabelA");
But I can't figure out how to call it.(但是我不知道怎么称呼它。) Do I need to call it twice, once in the function for the randomly generated div fill and once in the function for the user-selected div fill?(我是否需要两次调用它，一次是在随机生成的div填充函数中，一次是在用户选择的div填充函数中？) Or can I have it outside those two functions as its own function?(还是可以在这两个功能之外将其作为自己的功能？) I'm new to javascript and can't quite make my tutorials come together for this one.(我是javascript的新手，不能完全将我的教程放在一起。) Any help much appreciated!(任何帮助，不胜感激！)
EDITED... Okay, here's the updated javascript to reflect the answer suggested below.(编辑...好吧，这是更新的JavaScript，以反映以下建议的答案。) I can see in the console that it is saving the value correctly to local storage, but it's not pre-populating the field with the saved value.(我可以在控制台中看到，它正在将值正确保存到本地存储中，但是并没有使用保存的值预填充字段。) So it's setting but not getting.(因此，它正在设置但没有得到。) Any further advice?(还有其他建议吗？)
<!-- fill currentRhythm_A -->
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('.button').on('click', function() {
var imagewanted = $(this).closest('.RM_rhythm').find('img').attr("src");
$('.currentRhythm_A').html("<img src='" + imagewanted + "' />");
var currentlabel = $(this).closest('.RM_rhythm').find('audio').attr("id");
$('#currentLabelA').html(currentlabel);
$('#playA').html("<source src='../audio/" + currentlabel + ".mp3' type='audio/mpeg' /><source src='../audio/" + currentlabel + ".ogg' type='audio/ogg' />");
$('#playA').load();
localStorage.setItem("image", imagewanted);
imagewanted = localStorage.getItem("image");
localStorage.setItem("label", currentlabel);
currentlabel = localStorage.getItem("label");
});
});
</script>
<!-- generate a random rhythm for A -->
<script>
function GetValueA(){
var myarray= new Array("0.1","1.1","2.1","2.2","2.3","2.4","2.5","2.6","2.7","2.8","2.9","2.10","2.11","2.12","2.13","2.14","2.15","3.1","3.2","3.3","3.4","3.5","3.6","3.7","3.8","3.9","3.10","3.11","3.12","3.13","3.14","3.15","4.1","4.2","4.3","4.4","4.5","4.6","4.7","4.8","4.9","4.10","4.11","4.12","4.13","4.14","4.15","5.1","5.2","5.3","5.4","5.5","5.6","5.7","5.8","5.9","5.10","5.11","5.12","5.13","5.14","5.15","6.1","6.2","6.3","6.4","6.5","6.6","6.7","6.8","6.9","6.10","6.11","6.12","6.13","6.14","6.15");
var random = myarray[Math.floor(Math.random() * myarray.length)];
//alert(random);
document.getElementById("message").innerHTML=random;
$('.currentRhythm_A').html("<img src='../images/RM-" + random + ".png' />");
$('#currentLabelA').html(random);
$('#playA').html("<source src='../audio/" + random + ".mp3' type='audio/mpeg' /><source src='../audio/" + random + ".ogg' type='audio/ogg' />");
$('#playA').load();
$('input:checkbox').removeAttr('checked');
localStorage.setItem("random", random);
random = localStorage.getItem("random");
}
</script>
ask by jennykat translate from so
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
