String methods display in DOM elements

1

I am working creating a 3 DOM element, one contains a button, and the other contains a string (a word), and third dom element will contain a display. It works this way: A click on the button will add string method to the string. The third element will display the result of the interaction. This is what I am trying to achieve (array methods), but with dom elements

let spellcheck = str.concat('s');
2

Please share your full code.:grinning:

4 
<lable>String:</lable><br>
<textarea id = 'string'></textarea>
<br>

<button type = button onclick = "StringMeth()">Add String Method</button>
  <p id = 'demo'>Display Result:</p>
5

Here is it:

<lable>String:</lable><br>
<textarea id = 'string'></textarea>
<br>

<button type = button onclick = "StringMeth()">Add String Method</button>
  <p id = 'demo'>Display Result:</p>
6

Mostly these type of DOM manipulations you can use <form> tag instead.

First, you should define a function StringMeth() defined and get the string from the textarea using value property inside the function. The function is triggered when the button is clicked.

Note: You should properly enclose attribute values inside a single or double quotes.

// Function StringMeth()


function StringMeth() {
 const str = document.getElementById('string').value;
 let spellcheck = str.concat('s');
const display = document.getElementById('demo').innerHTML = "Display Result: "+spellcheck;
}
7

What does your suggestion look like. I have rough idea. But can you put it into coding.

9

This what I am trying to do :

<html>
<body>

<h3>Using string method and the DOM to create to create plural word</h3>

Address:<br>
<textarea id="myTextarea">
plural for boy is :</textarea>

<p>Click the button to get append or add s to the word 'boy'.</p>

<button type="button" onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var x = document.getElementById("myTextarea").value;
  var newText = document.createElement('p');
  var newNode = document.createTextNode('s');
  newText.appendChild(newNode);
  var result = newText.appendChild(newNode);
  //add 's' to 'boy'//
  var finalResult = result.append(x);
  document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>
````
10

This what I am trying to do :

<html>
<body>

<h3>Using string method and the DOM to create to create plural word</h3>

Address:<br>
<textarea id="myTextarea">
plural for boy is :</textarea>

<p>Click the button to get append or add s to the word 'boy'.</p>

<button type="button" onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var x = document.getElementById("myTextarea").value;
  var newText = document.createElement('p');
  var newNode = document.createTextNode('s');
  newText.appendChild(newNode);
  var result = newText.appendChild(newNode);
  //add 's' to 'boy'//
  var finalResult = result.append(x);
  document.getElementById("demo").innerHTML = x;
}
</script>

</body>
11

Why use a form tag? Form tag is to send http requests. You don’t need to use a form tag. You could do this whole thing with DOM manipulation.

12

The answer is right there in the code you just entered. Question is: what don’t you understand?

I can tell you probably got that code from a w3schools example. The point of those try it snippets is so that you can play around with the code and see what it does. Try that, come back with a question if you fail to identify the relationship between the causes and effects of your tinkering. I’d be happy to clarify. :slightly_smiling_face: