追加href属性が機能していません - Javascript

Question

ページの上部にスライドするアラートを設定しています。コードでは、href属性はWebアドレスを追加していないようです。私は自分のコンソールに何のエラーも出ていませんが、これを引き起こしているものを見つけることはできません。テストに設定した「Go to 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"; 

あなただけの「グーグルにアクセスしてください」

Answer 2

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

ここ

あなたは「Googleの訪問」するinnerHTMLプロパティを作るtopBarButtonにし、次の行にanchorTagを添付して、ボタンを交換してください。アンカータグが削除されています。コードを次のように変更します。

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

Answer 3

他にも、少なくともCodePenではURLに「https：//」を追加する必要がありました。 はCSSで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); 

// }; 

を修正し、あなたは下線を取り除くために#topbar_button a { text-decoration: none }を追加することができます。