Question

我正在设置一个会在页面顶部滑入的提醒。在代码中，href属性似乎没有添加Web地址。我在控制台中没有收到任何错误，但似乎无法找出造成这种情况的原因。当您点击“转到Google”按钮我已将其设置为测试时，它应该会将您带到Google，但事实并非如此？代码和Codepen在下面，任何帮助都会很棒。

Codepen在这里：https://codepen.io/emilychews/pen/ZyGrrR

HTML

<div id="header">Original Header</div>

CSS

   * {font-family: arial;
 line-height: 100px;}

#header {width: 100%;
height: 100px;
background: red;
color: white;
text-align: center;}

div#newBar {
  width: 100%;
  height: 50px;
  background-color: blue;
  line-height: 50px;
  text-align: center;
  color: white;
}

div#topbar_button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 11%;
  height: 54%;
  background: white;
  position: relative;
  bottom: 41PX;
  margin-left: 75%;
  color: blue;
  border-radius: 2px;
}

JAVASCRIPT

// window.onload = function() {

var header = document.getElementById('header');

var newBar = document.createElement('div');
newBar.id = "newBar";

var newBarText = document.createTextNode("Click on the link to go to Google");
newBar.appendChild(newBarText);

// create button and anchor tag and append
var topBarButton = document.createElement('div');
    topBarButton.id = "topbar_button";
var anchorTag = document.createElement('a');
    anchorTag.setAttribute('href', 'www.google.co.uk');
    topBarButton.appendChild(anchorTag);
    topBarButton.innerHTML = "Visit Google";

newBar.appendChild(topBarButton);

// append new top bar to header 
var header = document.getElementById('header');
header.parentNode.insertBefore(newBar, header);

// };

Answer 1

topBarButton.appendChild(anchorTag);
topBarButton.innerHTML = "Visit Google";

您只需使用＆＃34;访问Google＆＃34;

替换按钮

Answer 2

var anchorTag = document.createElement('a');
    anchorTag.setAttribute('href', 'www.google.co.uk');
    topBarButton.appendChild(anchorTag);
    topBarButton.innerHTML = "Visit Google";

在这里你将anchorTag附加到topBarButton并在下一行中将innerHTML附加到＆＃34;访问Google＆＃34;。这使得anchorTag被删除。更改代码如下，

    var anchorTag = document.createElement('a');
            anchorTag.setAttribute('href', 'www.google.co.uk');
anchorTag.innerHTML = "Visit Google";
            topBarButton.appendChild(anchorTag);

Answer 3

除了其他人说的话，你还需要添加＆＃34; https：//＆＃34;到URL，至少在CodePen中。更正了JavaScript

// window.onload = function() {

var header = document.getElementById('header');

var newBar = document.createElement('div');
newBar.id = "newBar";

var newBarText = document.createTextNode("Click on the link to go to Google");
newBar.appendChild(newBarText);

// create button and anchor tag and append
var topBarButton = document.createElement('div');
    topBarButton.id = "topbar_button";
var anchorTag = document.createElement('a');
    anchorTag.setAttribute('href', 'https://www.google.co.uk');
    topBarButton.appendChild(anchorTag);
    anchorTag.innerHTML = "Visit Google";

newBar.appendChild(topBarButton);

// append new top bar to header 
var header = document.getElementById('header');
header.parentNode.insertBefore(newBar, header);

// };

在CSS中，您可以添加#topbar_button a { text-decoration: none }以删除下划线。

附加的href属性不起作用 - Javascript

3 个答案: