Get value of text input element, store in variable

Hi there! I think maybe you're overthinking this. There is nothing in the html called "text.value". But we can access the value of the the input with the .value property and then store it back in the variable. Take a look:

let linkName = document.querySelector('input').value;

Here I select the <input> element and then retrieve the value from it and assign it back into the variable named linkName. There are likely other ways to do this, but this was my solution. Hope this helps!

Best answer ever.

//answer format:
//answer to challenge 1
//answer to challenge 2 partA
//answer to challenge 2 partB


// Answer:
let linkName = document.querySelector('#linkName').value; 
let randomVariableName = document.querySelector('#link');
randomVariableName.textContent = linkName;

//other formats you can use
let linkName = document.querySelector('input').value;
let anyVariableName = document.querySelector('a');
anyVariableName.textContent = linkName;

let linkName = document.getElementById('linkName').value;
let  someVariableName= document.getElementById('link');
someVariableName.textContent = linkName;

let linkName = document.getElementById("linkName").value;
let link = document.querySelector('a'); 
link.textContent = linkName;



//
// original instructions:
// Challenge Task 1 of 2 
//"Get the value of the text input element, and store it in a variable linkName"

//My explanation:
// First, "make a variable named linkName" (they already did this for you on line 1 with,
// let linkName;)

// Step 1B) 
//"Get the value of the text input element"
document.querySelector('input').value

// you can also do it this way
// because remember <input>'s id is linkName
 document.getElementById('linkName').value
 document.querySelector('#linkName').value //# is for id's in case you forgot.


// Step 1C) "store it in a variable linkName"
let linkName = document.querySelector('input').value




// original instructions:
// Challenge Task 2 of 2 
//  "Set the text content of the a tag to be the value stored in the variable linkName."

//My explanation:
// <a>.textContent = linkName;
// Unfortunately we can't do it like this.

//so we make a random variable set it equal to the a tag <a>
let randomVarName = document.querySelector('a');

//and then set that variable = to link name like this:
randomVarName.textContent = linkName;

//tada! this took me like 2 hours to figure out and another to explain to you.
// ¯\_(ツ)_/¯

Yep, Jennifer's answer does work, really your big problem was just your selector. And as Steven mentioned, there is another way with getElementById() that would work as well, it would look like this

let linkName = document.getElementById('linkName').value;

Couple ways to accomplish the same thing. I tried both solutions, and both passed the quiz.

Me thinks that maybe the tasks in this course are a little too challenging. I'm all for a head scratcher, but where in this course was this stuff covered, to the degree we're being tested on? Thanks everyone for your great answers, they helped a ton.

Correct answers as of 2/21/17 1) let inputValue = document.querySelector('#linkName').value; or use get element by id 2)let anchor = document.querySelector("#link"); anchor.innerText = inputValue;

There is a bug or I am dumber than I previously thought. The directions say to store the a tag text contents in a variable called inputValue. In the above code, is inputValue a variable?

okay, will answer my own question, inputVariable in 2 is obv a variable. This should help anyone struggling with the concept. Its relatively easy, the wording is just confusing, suggesting you should create a variable and store info in it.

Is it right to use this?

'''linkName = linkName.value;'''

Just look up input type id in html ( <input type="text" id="linkName">) and add .value at the end: let inputValue= document.getElementById('linkName').value;

Nowhere did they cover this like the way they asked us in the quizzes, this seems to be a recurring thing with the DOM course, mildly frustrating.

At first, I was very interested in doing quizzes because what they ask is based on what they cover in their respective coding sessions. But these DOM quizzes makes me frustrated. I hope treehouse might relook at the syllabus and makes our head scratch less.