Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Greg Schudel
Greg Schudel
4,090 Points

personal link project

I want to create abutton with JS that when you put a url in the input box, you click the button and it goes to that link, this is what I got, it won't work What am I doing wrong? HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Changing JS HREF</title>
    <link rel="stylesheet" href="css/style.css">

  </head>
  <body>
    <h1 id="myHeading">JavaScript and the DOM</h1>


    <p>Making a web page interactive</p>
          <p title="label" >paste your link and away you go!</p>

        <input type="text" id="myTextInput" value="hello"> 

        <a href="" target="_blank"><button id="goButton" > GO TO YOUR LINK! </button></a>

  <script src="app.js"></script>  
  </body>


</html>

JS

const goButton = document.getElementById('goButton');

let textFromButton = document.getElementById('myTextInput').value;




goButton.addEventListener('click', () => {


     goButton.href('a') =  textFromButton.innerHTML;



});
Andrei Duhanes
Andrei Duhanes
14,155 Points

Hi,

Try this. it's not elegant, but it works: If you have questions about the code, feel free to ask !

const goButton = document.getElementById('goButton');

goButton.addEventListener('click', ()=> {
    let textFromButton = document.getElementById('myTextInput').value;
    let attribute3 = document.getElementsByTagName("a")[0];
    attribute3.setAttribute("href", ("http://"+textFromButton));
});

2 Answers

Steven Parker
Steven Parker
243,253 Points
Steven Parker
Steven Parker
243,253 Points

I see a few issues:

  • you wouldn't want to get the value of the input before the event is triggered
  • the value of an element would not have an "innerHTML" property
  • the "href" property is not a function, so the parentheses cause a syntax error
  • you would want to set the href property on the anchor element, not the button itself
Greg Schudel
Greg Schudel
4,090 Points

I see a few issues:

Any ideas on how to make this better? Can you show me the example of the code your talking about?

Steven Parker
Steven Parker
243,253 Points
Steven Parker
Steven Parker
243,253 Points

I thought you might like to work it out for yourself from the hints.

But putting the ID on the anchor instead of the button:

  <a id="link" href="" target="_blank"><button>GO TO YOUR LINK!</button></a>

Then applying the other hints to the script:

script.js 
const link = document.getElementById("link");

link.addEventListener("click", () => {
  const textFromInput = document.getElementById("myTextInput").value;
  link.href = textFromInput;
});

Now please tell me I didn't just do your homework assignment. :open_mouth:

Greg Schudel
Greg Schudel
4,090 Points
Greg Schudel
Greg Schudel
4,090 Points

Try this. it's not elegant, but it works: If you have questions about the code, feel free to ask !

Andres, why did you declare the index after using the getElementByTagName Selector? Isn't the selector enough?

let attribute3 = document.getElementsByTagName("a")[0];

//Now please tell me I didn't just do your homework assignment. :open_mouth:

NO! Peter, this is a personal project. I'm just struggling along with learning and trying to tread shallow water without wanting to rage quit. Thanks for your help, it feels good to know that I was close!!

And Peter, why does defining link within the function give me an error

//let link.href = textFromInput;

should'n't it be dynamic????

Steven Parker
Steven Parker
243,253 Points
Steven Parker
Steven Parker
243,253 Points

Who's "Peter"? Spiderman? :laughing:

And you would need to define "link" before you could access the href property on it:

const link = document.getElementById("link");
link.href = textFromInput;

But if you don't already have it defined, you don't really need it, as you can do this:

document.getElementById("link").href = textFromInput;
Greg Schudel
Greg Schudel
4,090 Points

Who's "Peter"? Spiderman? :laughing:

Who wouldn't want to be!! That was a compliment,.....er.. uh....maybe a typo! Yeah, I meant you Steven. Thanks for the correction and guidance...yet again! lol

Steven Parker
Steven Parker
243,253 Points
Steven Parker
Steven Parker
243,253 Points

Greg Schudel — Glad to help. You can mark the question solved by choosing a "best answer".
And happy coding!