使用javascript打印链接的名称

printing name of the link using javascript

本文关键字：链接 javascript 打印 使用      更新时间：2023-09-26

我是javascript新手。我想在点击链接时在网页上打印链接的名称

我的尝试是:

<!DOCTYPE html>
<html>
<body>
 <a href="#Foo" id="link1" onclick="myFunction()">Click me</a>;
 <BR>
 <a href="#Foo1" id="link2" onclick="myFunction1()">Click me1</a>
 <p id="demo"></p>
 <script>
 function myFunction() {
    var t = document.getElementById('#link1').href ;       document.getElementById("demo").innerHTML =t;
 }
 function myFunction1() {
    var t1 = document.getElementById('#link2').href
     document.getElementById("demo").innerHTML = t1;
 }
 </script>
 </body>
 </html>

我想打印链接的名称，而不是hello和hello world。

您可以使用jquery来代替创建多个函数。

$(document).ready(function(){
 $('a').on('click', function(){
   $('#demo').html($(this).html());
 });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#Foo" id="link1" >Click me</a>;
 <BR>
 <a href="#Foo1" id="link2">Click me1</a>
 <p id="demo"></p>

如果你已经在使用jQuery，你可能最好利用jQuery事件的click而不是内联的方法调用，让你的调用'不引人注目' (https://en.wikipedia.org/wiki/Unobtrusive_JavaScript)。像这样:

<a href="#Foo" id="link1">Click me</a>
<a href="#Foo1" id="link2">Click me1</a>
<p id="demo"></p>
$(document).ready(function(){
$('a').click(function(){
    $('#demo').text($(this).html());
});
});

直接替换

document.getElementById("demo").innerHTML ="hello";


document.getElementById("demo").innerHTML = t;

也避免使用内联事件处理程序绑定事件。' 

<body>
   <a href="#Foo" id="link1">Click me</a>;
   <BR>
   <a href="#Foo1" id="link2">Click me1</a>
   <p id="demo"></p>
   <script>
      $('a').on('click', function(e) {
           e.preventDefault; // prevents the default action
           var linkText = $(this).text();
           $('#demo').text(linkText); // jQuery way
           document.getElementById("demo").innerHTML = linkText; // Vanilla JS
      });
 </script>
</body>

此外，您最好将整个JS提取到一个单独的文件中，并在script标签中引用。

假设您想绘制锚的文本，请更新您的代码如下

function myFunction() {
    document.getElementById("demo").innerHTML = document.getElementById("link1").innerHTML;
 }
function myFunction1() {
    document.getElementById("demo").innerHTML = document.getElementById("link2").innerHTML;
 }

可以在函数调用中传递this，可以有1个函数

标记

<a href="#Foo" id="link1" onclick="myFunction(this)">Click me</a>;
 <BR>
 <a href="#Foo1" id="link2" onclick="myFunction(this)">Click me1</a>
脚本

function myFunction(element) {
    document.getElementById("demo").innerHTML = element.innerHTML;
}

参考- http://plnkr.co/edit/C3qN5LCpOI11jwcvx9CD?p=preview

第一期您正在使用文本，而不是href属性。如果这是有意为之，那么从我所能告诉你的

来看，你的代码可以正常工作。
document.getElementById("demo").innerHTML = document.getElementById('link1').innerHTML;

问题# 2您将值存储在变量中，而不是使用该值。这是您的代码中更可能出现的问题。由于该值只使用一次，我将直接使用该值，而不是存储它

document.getElementById("demo").innerHTML = document.getElementById('link1').href;

我还为一行函数

删除了不必要的jquery和变量存储。最后需要注意的是，在函数末尾添加return false将阻止链接尝试重定向。
相关文章：