Question

我对 JS 一无所知，所以我需要你的帮助。我刚刚在互联网上搜索，但我没有找到任何关于我会问你的问题。我需要更改一个 html 标签及其所有内容，我认为最好的方法可能是 JS。例如：

我需要那个标签

<p id="usernameText">My Username</p>

将随之改变

<input type="text" name="uname" id="uname" placeholder="Inserire qui l\'username" style="width:100%">

点击一个项目，所以我认为我应该使用onclick="myfunction()"，但我不知道从哪里开始使用 JS 代码！有人可以帮我吗？

Answer 1

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="div1">
      <p id="toggleItem">My Username</p>
      <button onclick="onClick()">Toggle</button>
    </div>

    <script>
      const onClick = () => {
        const div1 = document.getElementById("div1");
        const toggleItem = document.querySelector("#toggleItem");

        

        if (toggleItem.tagName === "INPUT") {
          const p = document.createElement("p");
          p.innerText = "Username";
          p.id = "toggleItem";
          div1.appendChild(p);
        } else {
          const input = document.createElement("input");
          input.name = "uname";
          input.placeholder = "Username";
          input.type = "text";
          input.id = "toggleItem";
          div1.appendChild(input);
        }

        toggleItem.remove();
      };
    </script>
  </body>
</html>

Answer 2

我找到了一个最简单的方法，我有多个元素要更改，所以我还添加了一些 var

    class Airline < ApplicationRecord
  has_many :reviews
  before_create :create_slug, :calculate_score

  #create a slug like 'url.com/air-new-zealand' for an airline
  def create_slug
    self.slug = name.to_s.parameterize
  end

  def calculate_score
    reviews.average(:score).to_f.round(2) * 100
  end
end

在 html 中我是这样制作的：

class Review < ApplicationRecord
  belongs_to :airline
end

我用错了方法？

用 JS 替换 HTML 标签及其内容

2 个答案: