将用户选择数据临时存储在我的数组中

Question

这是我的表单，下面是一个函数。我需要 3 个功能，1 个用于存储数据，1 个用于保存数据，1 个用于显示所有存储的数据。我怎样才能完成所有这些功能，使它们相互对应。

注意：用户将输入数据，因此将临时保存用户选择数据。用户应该可以点击按钮来运行该功能，但是我怎样才能正确地完成这三个功能。

<form name = "Music">

            <p>Input a Song Name, Artist, Collaborations, Duration or Album</p>

            <input type="text" name = "Song_Name" id= "Song_Name" size="20"> <br> 
            <input type="text" name = "Artist" id= "Artist" size="20"> <br> 
            <input type="text" name = "Collaborations" id= "Collaborations" size="20"> <br> 
            <input type="text" name = "Duration" id= "Duration" size="20"> <br> 
            <input type="text" name = "Album" id= "Album" size="20"> <br> 

            <input type="button" value = "Save" onclick = "Save()"> <br>
            <input type="button" value = "Search" onclick = "Store()"> <br>
            <input type="button" value = "Show_All" onclick = "Show_All()"> <br>

保存功能：

var catalogue[];

function Save = Music.Song_Name.Artist.Collaborations.Duration.Album.Save{

            var SongName = document.getElementById('Song_Name').value;
            var Artist = document.getElementById('Artist').value;
            var Collaborations = document.getElementById('Collaborations').value;
            var Duration = document.getElementById('Duration').value;
            var Album = document.getElementById('Album').value;

        document.write("You have chosen "+ Song_Name + Artist + Collaborations + Duration + Album)
}

Answer 1

首先，我建议将值存储在对象而不是数组中。当您拥有多个相关的数据时，使用起来会容易得多。以下是它在 Store 和 Show 中的工作方式：

var catalogue;

function Store() {
    catalogue = {
        SongName: document.getElementById('Song_Name').value;
        Artist: document.getElementById('Artist').value;
        Collaborations: document.getElementById('Collaborations').value;
        Duration: document.getElementById('Duration').value;
        Album: document.getElementById('Album').value;
    }
}

function Show_All() {
    document.getElementById('Song_Name').value = catalogue.SongName;
    document.getElementById('Artist').value = catalogue.Artist;
    document.getElementById('Collaborations').value = catalogue.Collaborations;
    document.getElementById('Duration').value = catalogue.Duration;
    document.getElementById('Album').value = catalogue.Album;
}

您如何处理“保存”取决于您要将其保存到的位置，但一般的想法是您可以将目录值直接传递到您保存它的位置，或者解析目录的属性目录对象并将每个对象传递到您保存它们的任何位置。