Блог

Главная - Вопросы по программированию - Как получить текст тега привязки к переменной и отобразить как innerHTML?

Как получить текст тега привязки к переменной и отобразить как innerHTML?

#javascript #jquery

#javascript #jquery

Вопрос:

Я привел код ниже. Я хочу, чтобы переменная JS принимала текст тега привязки в качестве входных данных и отображалась в другом элементе через innerHTML.

 <!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  </head>
  <body>

    <p><a class="myAnchor" href="http://www.microsoft.com">www.microsoft.com</a>
    <a class="myAnchor" href="http://www.microsoft.com">www.microsoft.com</a></p>

    <p>Click the button to change the value of the href attribute of the link above to "www.cnn.com".</p>

    <button onclick="myFunction()">Try it</button>

    <p id="demo"></p>

    <script>
      var x=$(".myAnchor").on("click",function(event){
        event.preventDefault();
        $(this).text();
      });

      function myFunction() {
        document.getElementById("demo").innerHTML = x;
      }
    </script>

  </body>
</html>

Ответ №1:

Что вы делаете не так?

Вместо того, чтобы присваивать событие щелчка переменной, назначьте внутренний текст ссылки, по которой вы нажимаете, в переменной и при нажатии кнопки назначьте эту переменную требуемому элементу.

 <!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  </head>
  <body>
    <p>
      <a class="myAnchor" href="http://www.microsoft.com">www.microsoft.com1</a>
      <a class="myAnchor" href="http://www.microsoft.com">www.microsoft.com2</a>
    </p>

    <p>
      Click the button to change the value of the href attribute of the link
      above to "www.cnn.com".
    </p>

    <button onclick="myFunction()">Try it</button>

    <p id="demo"></p>

    <script>
      var x = '';
      $(".myAnchor").on("click", function(event) {
        event.preventDefault();
        x = $(this).text();
      });
      function myFunction() {
        document.getElementById("demo").innerHTML = x;
      }
    </script>
  </body>
</html>