Question

刚刚开始学习Js几天，我一直试图制作一个按钮，当你点击它时，它会将0 xp的文本改为1,2,3等等。但是我很难做到所以。这是我的代码，任何帮助将不胜感激。

var have = document.getElementsByClassName("earn");
var credits = document.getElementsByClassName("money");
var button = document.getElementsById("singlebutton");


credits.onclick = change() {
  document.getElementsByClassName("money").innerHTML = "i++" + " xp";
}

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <link rel="stylesheet" href="style.css">
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>

<body>
  <header>
    <h1>Blank Page</h1>
  </header>
  <main>
    <form>
      <div class="col-md-4 text-center">
        <p><button id="singlebutton" name="singlebutton" class="btn btn-success">Click here</button></p>
      </div>
      <div class="credit text-center">
        <div class="earn">
          <p>You have earned: </p>
        </div>
        <div class="money">0 xp</div>
      </div>
    </form>
  </main>
  <script src="main.js"></script>
  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>

</html>

Answer 1

很多拼写错误

getElementByClassName不是getElementById
getElementsById不是onclick
您可以使用type="button"功能按钮
为按钮getElementsByClassName
使用index从"i++" + " xp";
这里的连接错误(i++) + " xp";它应该是var i=0;
您尚未声明var i =0; function change() { document.getElementsByClassName("money")[0].innerHTML = (i++) + " xp"; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <link rel="stylesheet" href="style.css">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

  </head>

    <header>
        <h1>Blank Page</h1>
    </header>
    <main>
        <form>
            <div class="col-md-4 text-center">
                <p><button id="singlebutton" name="singlebutton" class="btn btn-success" type="button" onclick ="change()">Click here</button></p>
            </div>

            <div class="credit text-center">
                <div class="earn"><p>You have earned: </p></div>
                <div class="money">0 xp</div>
            </div>
        </form>
    </main>
    <script src="main.js"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  </body>
</html>

＆＃13;

json

＆＃13;

Answer 2

在调用document.getElementsByClassName之后追加[0]，就像这样得到匹配的第一个元素

document.getElementsByClassName("earn")[0]

Answer 3

在这里，我稍微改变了你的代码。

感谢您不要在HTML代码中混合使用JS。我注意到你的代码中有一些错误。

JavaScript没有getElementsById()，它有getElementById()。
将事件附加到元素使用 HTMLobject.addEventListener(eventname, myScript)。
声明和初始化变量i。

＆＃13;

var have = document.getElementsByClassName("earn");
var credits = document.getElementsByClassName("money");
var button = document.getElementById("singlebutton");
var i = 0;

button.addEventListener('click',function () {
    credits[0].innerHTML = (++i) + " xp";
});

＆＃13;

<div class="col-md-4 text-center">
    <p><button id="singlebutton" name="singlebutton" class="btn btn-success">Click here</button>
    </p>
</div>

<div class="credit text-center">
    <div class="earn"><p>You have earned: </p></div>
    <div class="money">0 xp</div>
</div>

＆＃13;

如何在JScript中为按钮指定动作？

3 个答案: