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
steven swensen
7,926 PointsI know there is a better way to write this.
let fName = document.querySelector('input[name="fName"]');
let mName = document.querySelector('input[name="mName"]');
let lName = document.querySelector('input[name="lName"]');
let title = document.querySelector('input[name="title"]');
let h2NameFormatter = document.querySelector('h2#nameFormatter')
fName.value = ''; mName.value = ''; lName.value = ''; title.value = '';
const nfClear = document.querySelector('button#nfClear');
const for1 = document.querySelector('button#Format1');
const for2 = document.querySelector('button#Format2');
const for3 = document.querySelector('button#Format3');
const for4 = document.querySelector('button#Format4');
const for5 = document.querySelector('button#Format5');
const for6 = document.querySelector('button#Format6');
for1.addEventListener('click', () => {
h2NameFormatter.textContent = title.value + ' ' + fName.value + ' ' + mName.value + ' ' + lName.value;
});
for2.addEventListener('click', () => {
h2NameFormatter.textContent = fName.value + ' ' + mName.value + ' ' + lName.value;
});
for3.addEventListener('click', () => {
h2NameFormatter.textContent = fName.value + ' ' + lName.value;
});
for4.addEventListener('click', () => {
h2NameFormatter.textContent = lName.value + ', '+ fName.value + ' ' + mName.value + ' ' + title.value;
});
for5.addEventListener('click', () => {
h2NameFormatter.textContent = lName.value + ', '+ fName.value + ' ' + mName.value;
});
for6.addEventListener('click', () => {
h2NameFormatter.textContent = lName.value + ', '+ fName.value;
});
nfClear.addEventListener('click', () => {
fName.value = ''; mName.value = ''; lName.value = ''; title.value = ''; h2NameFormatter.textContent = 'Your name shows here.';
});...
Steven Parker
243,253 PointsIt's three "ticks". You can use the instructions for code formatting in the Markdown Cheatsheet pop-up below the "Add an Answer" area. 
And besides formatting, it would also help to show the HTML code along with the script.
5 Answers
Steven Parker
243,253 PointsI'm not sure that it's clearly "better", but you can certainly make the code much more compact by using a single delegated handler to deal with all the buttons, and switching on the button ID to perform the different functions:
const fName = document.querySelector('input[name="fName"]');
const mName = document.querySelector('input[name="mName"]');
const lName = document.querySelector('input[name="lName"]');
const title = document.querySelector('input[name="title"]');
const h2Fmt = document.querySelector("#nameFormatter");
document.addEventListener("click", e => {
if (e.target.tagName = "BUTTON")
switch (e.target.id) {
case 'Format1': h2Fmt.textContent = title.value + " " + fName.value + " " + mName.value + " " + lName.value; break;
case 'Format2': h2Fmt.textContent = fName.value + " " + mName.value + " " + lName.value; break;
case 'Format3': h2Fmt.textContent = fName.value + " " + lName.value; break;
case 'Format4': h2Fmt.textContent = lName.value + ", " + fName.value + " " + mName.value + " " + title.value; break;
case 'Format5': h2Fmt.textContent = lName.value + ", " + fName.value + " " + mName.value; break;
case 'Format6': h2Fmt.textContent = lName.value + ", " + fName.value; break;
case 'nfClear': h2Fmt.textContent = "Your name shows here.";
fName.value = mName.value = lName.value = title.value = "";
}
});
steven swensen
7,926 PointsSteven you are the man. you have no idea how much I learned from you last little bit of code, after i dissected and understood it I used it on some of my other problems in the same project and was able to cut my code down by over 100 lines.
steven swensen
7,926 PointsHey I have a quick question on your if statement you have it in two sets of parenthesis and then you don't start the action part until after the switch statement can you explain that? i am assuming the switch statement is part of condition but i don't get why there are two parenthesis.
Steven Parker
243,253 PointsI'm not sure how those got there, it wasn't intentional. I removed the redundant set.
If you're not familiar with it, a switch statement is a bit like an "if...else if" chain in that it tests for multiple values and executes a different bit of code for each one.
steven swensen
7,926 Pointsoh and here is the html for this problem. HTML
<div class="all" id="pro7"><!-- Name Formatter -->
<h1>Name Formatter</h1>
<p>Enter your name and title below. </p>
<form id="name">
<label for="fName">First Name:</label>
<input type="text" name="fName" id="fName">
<label for="mName">Middle Name:</label>
<input type="text" name="mName" id="mName">
<label for="lName">Last Name:</label>
<input type="text" name="lName" id="lName">
<label for="title">Title:</label>
<input type="text" name="title" id="title">
<div class="frommat">
<button type="button" id="Format1">Format 1</button>
<button type="button" id="Format2">Format 2</button>
<button type="button" id="Format3">Format 3</button>
<button type="button" id="Format4">Format 4</button>
<button type="button" id="Format5">Format 5</button>
<button type="button" id="Format6">Format 6</button>
</div>
<button type="button" id="nfClear">Clear</button>
</form>
<h2 id="nameFormatter">Your name shows here.</h2>
</div>
steven swensen
7,926 Pointsoh okay thanks that makes it clearer
Zack Lee
Courses Plus Student 17,662 PointsZack Lee
Courses Plus Student 17,662 Pointscan you reformat this so its more readable? to embed a code block, follow the block with ```` (4 ticks) you can specify the code coloring by adding the work "javascript" after the ticks.