根据范围滑块从XML文件检索和显示数据

Question

我正在开发一个Web应用程序，该应用程序允许用户使用范围滑块选择自己的心情。

我想上传XML文件，上传完成后，用户可以进行选择。

如何使我的应用程序根据用户的心情选择从XML文件中检索并显示name和image值。例如如果用户选择他们感到难过，那么推荐的内容会让他们感到高兴，因此可能是一部喜剧电影。

我的XML文件：

<?xml version="1.0" encoding="UTF-8"?>
<programmeList>
<programme id="1">
<name>Alice in Wonderland</name>
<image>images/alice_in_wonderland.jpg</image>
<mood>Calm</mood>
</programme>
<programme id="2">
<name>Avatar</name>
<image>images/avatar.jpg</image>
<mood>Fearless</mood>
</programme>
<programme id="3">
<name>Bruce Almighty</name>
<image>images/bruceAlmighty.jpg</image>
<mood>Comedy</mood>
</programme>

</programmeList>

到目前为止，我的代码：

<div class="contrainer">

<h1>Movie Recommendations</h1>

<p>Please upload file: </p>
<form action="upload.php" method="post">
<div class="form-group">
<input type="file" class="filestyle" data-buttonText="Select a File">
</div>
</form>

<!-- Range slider-->
<div class="range-slider">
<label for="range_1">Agitated</label>
<input class="range-slider__range" type="range" min="0" max="100" id="range_1">
<label for="range_1">Calm</label>      
</div>

<!-- Sad = 0 , Happy = 100 -->
<div class="range-slider">
<label for="range_2">Sad</label>
<input class="range-slider__range" type="range" min="0" max="100" id="range_2">
<label for="range_2">Happy</label>

</div>

<!-- Tired = 0 , Wide Awake = 100 -->
<div class="range-slider">
<label for="range_3">Tired</label>
<input class="range-slider__range" type="range" min="0" max="100" id="range_3">
<label for="range_1">Wide Awake</label>

 </div>

 <!-- Scared = 0 , Fearless = 100 -->
 <div class="range-slider">
 <label for="range_4">Scared</label>
 <input class="range-slider__range" type="range" min="0" max="100" id="range_3">
 <label for="range_1">Fearless</label>

 </div>
 </div>

<!-- Put recommended content here from XML file -->
<table style="width:100%">
<tr>
</tr>
<tr>
<!-- Retrieve 'image' from XML file -->
<td><img src="">No content</img></td>
<td><img src="">No content</img></td> 
<td><img src="">No content</img></td>
<td><img src="">No content</img></td>
<td><img src="">No content</img></td>
</tr>
<!-- Retrieve movie 'name' -->
<tr>
<td>No content</td>
<td>No content</td> 
<td>No content</td>
<td>No content</td>
<td>No content</td>
</tr>
</table> 
<!-- end of table -->

</body>