Combining strings in Javascript

Question

I'm experimenting with Javascript and I created a simple HTML page with two fields, a button, and another field that should be the combination of the first two fields.

However, my Javascript is not working. Here are my files:

<!DOCTYPE html>
<html>
<head>
  <script src="script.js"></script>
</head>
<body>
  <h2>My First Web Page</h2>
  <p id="first">My First Paragraph.</p>
  <p id="second">My Second Paragraph.</p>
  <input onclick="myFunction()" type="submit" value="Combine" />
  <p id="third">Concatenate first and second.</p>
</body>
</html>

and the Javascript

myFunction(){
  var first = document.getElementById("first").value;
  var second = document.getElementById("second").value;

  var third = first + " " + second;
  document.getElementById("third").value = third;

}

Alternatively, I'm testing it on this Codepen template

Paragraphs don't have the value attribute. Form elements do — j08691
– j08691, Commented Aug 25, 2018 at 16:05
In your codepen your js has a syntax error - click the error icon to see it — Chris Cousins
– Chris Cousins, Commented Aug 25, 2018 at 16:05
Your syntax for declaring a function is incorrect, it should be function myFunction() { — Axnyff
– Axnyff, Commented Aug 25, 2018 at 16:05

Steven Spungin · Accepted Answer · 2018-08-25 16:06:51Z

2

Use innerText instead of value. And declare function correctly.

function myFunction() {
  var first = document.getElementById("first").innerText;
  var second = document.getElementById("second").innerText;
  var third = first + " " + second;
  document.getElementById("third").innerText = third;
}

<!DOCTYPE html>
<html>

<head>
  <script src="script.js"></script>
</head>

<body>
  <h2>My First Web Page</h2>
  <p id="first">My First Paragraph.</p>
  <p id="second">My Second Paragraph.</p>
  <input onclick="myFunction()" type="submit" value="Combine" />
  <p id="third">Concatenate first and second.</p>
</body>

</html>

answered Aug 25, 2018 at 16:06

Steven Spungin

29.5k7 gold badges97 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sinisag · Accepted Answer · 2018-08-25 16:12:28Z

2

You must declare it as function. And value is not the right property to modify, but you can use 'innerHTML' or example. Here is the updated, working JS.

function myFunction(){
    var first = document.getElementById("first").innerHTML;
    var second = document.getElementById("second").innerHTML;
    var third = first + " " + second;
    document.getElementById("third").innerHTML = third;
}

answered Aug 25, 2018 at 16:12

Sinisag

1,37812 silver badges12 bronze badges

Comments

jh314 · Accepted Answer · 2018-08-25 16:06:55Z

1

You can use textContent instead:

function myFunction(){
  var first = document.getElementById("first").textContent;
  var second = document.getElementById("second").textContent;

  var third = first + " " + second;
  document.getElementById("third").textContent = third;

}

answered Aug 25, 2018 at 16:06

jh314

27.9k16 gold badges66 silver badges83 bronze badges

Comments

Benedikt Vilji Magnússon · Accepted Answer · 2018-08-25 16:08:35Z

1

The problem here is that you are setting the value of the paragraph and not the html.

What you should do is use innerHTML instead of value.

Here is a stackoverflow discussion about the difference between value and innerHTML:

answered Aug 25, 2018 at 16:08

Benedikt Vilji Magnússon

879 bronze badges

Collectives™ on Stack Overflow

Combining strings in Javascript

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related