使用适合工作的工具。
使用单选按钮来管理你的评分，并按照你喜欢的方式设置标签的样式。然后使用CSS来处理隐藏和显示。让JavaScript来操作DOM。
记住ID需要是唯一的。一旦它们不再是唯一的，它们就不再是ID。如果ID不是唯一的，像document.getElementById这样的东西就会被破坏。
第一个

您 的 代码 有 多 个 问题 。 主要 问题 是 您 对 多 个 元素 使用 了 相同 的 id 、 num ， 这 是 无效 的 。 请 将 这些 id 改为 class ， 如下 所 示 ：

<ul>
    <li><button class="btn"><p class="num">1</p></button></li>
    <li><button class="btn"><p class="num">2</p></button></li>
    <li><button class="btn"><p class="num">3</p></button></li>
    <li><button class="btn"><p class="num">4</p></button></li>
    <li><button class="btn"><p class="num">5</p></button></li>
</ul>

中 的 每 一 个
完成 此 操作 后 ， 获取 最近 选择 的 按钮 的 一 种 方法 是 在 按钮 单击 事件 侦听 器 中 查找 嵌套 的 .num ， 例如 var rating = parseInt(btn.querySelector(".num").textContent)
下面 是 您 可以 通过 对 当前 代码 进行 最 小 更改 来 实现 这 一 点 的 方法 ：

const allBtns = document.querySelectorAll('.btn');
var currentRating = null;

allBtns.forEach(btn => {
  btn.addEventListener('click', function onClick() {
    btn.style.backgroundColor = 'orange';
    currentRating = parseInt(btn.querySelector(".num").textContent)
  })
});

function ShowAndHide() {
  if (currentRating){
    alert(currentRating);
  }
  let y = document.querySelector('.ratingbox');
  let x = document.querySelector('.thankyou');
  if (x.style.display == 'none') {
    y.style.display = 'none';
    x.style.display = 'block';

  } else {
    x.style.display = 'none';
  }
}

格式
下面 是 一 个 JsFiddle ， 它 可以 完成 此 操作 并 提醒 所 选 的 评级 ：https://jsfiddle.net/eg4Ly0nd/ 的 最 大 值
注意 ： 我 建议 在 每个 li 按钮 中 使用 隐藏 的 复选 框 输入 ， 并 将 事件 侦听 器 添加 到 代码 中 ， 以 选中 与 某 个 按钮 关联 的 选定 输入 ， 并 取消 选中 其他 按钮 。你 可以 只 找到 被 检查 的 输入 。 我 这样 写 只是 为了 对 你 提供 的 代码 做 最 小 的 修改 ， 同时 仍然 给 出 一 个 解决 方案 。

这只是一个替代解决方案，您可以仅通过Javascript为每个按钮设置rating值，并对现有代码进行最小的更改。
这样，它就独立于p中的任何内容。它还省去了阅读p标记的麻烦，因为根据设计，您可能需要用其他内容来替换它。
下面的Javascript片段可以与您发布的HTML一起使用，无需更改。
完整示例（使用下面的按钮进行演示）：
第一个
但是正如其他评论所提到的，建议您为每个p分配一个不同的id，或者根本不分配id，因为无论如何都不需要在代码中读取这些标记。