是否可以创建一个 JS 函数，让成员可以在字段中输入他们的唯一 ID，并在 URL 末尾有一个显示他们 ID 的链接？

Question

我的工作是创建一个带有按钮的简单字段，该按钮将显示一个 URL，并在 URL 后显示成员 ID。非会员将显示“会员ID无效”。

我正在尝试让 URL 链接可点击。我不擅长编码，但尽我最大的努力来完成这项工作。如果有人可以帮助我。请检查我的代码。我究竟做错了什么？对不起大家，我更新了代码：

HTML

<h2>Members Only</h2>
<input id="userInput"> <br>
Please click the link below after submitting your member ID. <br> <br>
<button onclick="myFunction()" >Submit</button>
<br> <br>
<h3 id="message"></h3>

JAVASCRIPT

<script>

function myFunction(){
 
    let userInput = document.querySelector("#userInput");
    let message = document.querySelector("#message");
    let link = document.getElementById("message");

    message.innerHTML = "https://website.com/" + userInput.value;
    link.href="https://website.com/" + userInput.value;
   }

</script>

Answer 1

实现此目的的一种方法是在

<a>

或

message

标签中创建动态 <h3>。

首先你需要纠正条件，所以在这里，我们需要使用

includes()

，你的

if

将变成像

if(array.includes(userInput.value)){..}

。这样，它会检查用户输入是否在有效成员 ID 的数组中。如果是，它将 <a> 标签的

href

设置为具有成员 id 的 url，并将

<a>

的文本更改为相同的 url。如果用户输入不在数组中，则会将消息文本设置为无效的会员 ID。

const array =['101','102','103','104','105'];

function myFunction(){
  let userInput = document.querySelector("#userInput");
  let message = document.querySelector("#message");
  
  // Clear the message after submit(e.i. show the 'link' or 'invalid' message
  message.textContent = "";

  // Remove existing anchor tag if it exists
  let existingLink = document.querySelector("#memberLink");
  if (existingLink) {
    existingLink.remove();
  }

  if (array.includes(userInput.value)){
    let memberLink = document.createElement("a");
    memberLink.id = "memberLink";
    memberLink.href = "https://website.com/" + userInput.value;
    memberLink.textContent = "https://website.com/" + userInput.value;
    message.appendChild(memberLink);
  } else {
    message.textContent = "Invalid Member ID";
 }
}

div#container{
    padding: 5px;
    background-color: rgba(0,0,0,0.1);
    text-align: center;
}

<div id="container">
  <h2>Members Only</h2>
  <input id="userInput"> <br>
  Please click the link below after submitting your member ID. <br> <br>
  <button onclick="myFunction()" >Submit</button> <br> <br>
  <h3 id="message"></h3>
</div>