Array not returning any value using console log

Question

I'm trying to create a program that can shuffle the middle letters (that is, all letters except the first and last letter in the word) within words. I am trying to pull words out of a string, that is pasted into a text area, in my HTML document, and create an array out of them. From there I'll figure out how to somehow make the shuffling works --but for now my problem is as follows:

    const text = document.getElementById('textfield');
    const textstring = JSON.stringify(text);
  
        document.querySelector('form.input-form').addEventListener('submit', function (e) {
    
        e.preventDefault();

        console.log(text.value);   

        var a1 = new Array();
        a1 = textstring.split(' ');
        console.log(a1);
    
    });

    <!doctype html>
        <html>
            <head> 
                <title>omrokering af bogstaver</title>
                <meta charset="utf-8">
            </head>
            <body id="body">
                <form class="input-form">
                    <input id="textfield" type="text" placeholder="Paste text" />
                    <button type="submit">omrokér</button>
                </form>
                
    
                <script type="text/javascript" src="omrokering.js"></script>
            </body>
        </html>

I can successfully pull the code out of the form, but when I try to log the contents of the array (I have tried a lot of different ways), it prints this: (1) ['{}'] in the console log, after I've typed in the textarea. When I use this alert function:

if(textstring !== null){alert(null);}

It returns "null", so I'm assuming the array is empty, and there is a problem with pulling the string from the form into the array.

I'm very beginner, so it will be greatly appreciated if you can give me a good explanation for this along with a solution, thank you!

why are you doing this? const textstring = JSON.stringify(text); Maybe you wanted to do ` const textstring = JSON.stringify(text.value);? — Chin. Udara
– Chin. Udara, Commented May 21, 2021 at 18:15
You are stringinfying an DOM element? What? const text = document.getElementById('textfield'); <-- dom element and you do const textstring = JSON.stringify(text); — epascarello
– epascarello, Commented May 21, 2021 at 18:16

Scott Marcus · Accepted Answer · 2021-05-21 18:33:11Z

1

Stringifying the element is wrong and unnecessary.
type="text/javascript" is also unnecessary as this is the default.
<input /> <-- Don't bother with self-terminated syntax.

const text = document.getElementById('textfield');

document.querySelector('form.input-form').addEventListener('submit', function (e) {
  e.preventDefault();
  console.log(text.value);   
  var a1 = text.value.split(' ');
  console.log(a1);
});

<form class="input-form">
  <input id="textfield" type="text" placeholder="Paste text">
  <button type="submit">omrokér</button>
</form>
<script src="omrokering.js"></script>

edited May 21, 2021 at 18:33

answered May 21, 2021 at 18:19

Scott Marcus

66k6 gold badges54 silver badges81 bronze badges

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

1 Comment

Chin. Udara Over a year ago

You must trim the value, otherwise the resulting array will contain elements with only white spaces. Try this var a1 = text.value.trim().split(' ');

Rahul Kumar · Accepted Answer · 2021-05-21 18:36:47Z

Remove textstring that is unnecessary and don't stringify() as it's already a string; and use text element only which you already console.log().

const text = document.getElementById('textfield');
  
document.querySelector('form.input-form').addEventListener('submit', function (e) {
  e.preventDefault();
  console.log(text.value);
  console.log(text.value.split(' '));
});

<!doctype html>
        <html>
            <head> 
                <title>omrokering af bogstaver</title>
                <meta charset="utf-8">
            </head>
            <body id="body">
                <form class="input-form">
                    <input id="textfield" type="text" placeholder="Paste text" />
                    <button type="submit">omrokér</button>
                </form>
                
    
                <script type="text/javascript" src="omrokering.js"></script>
            </body>
        </html>

Collectives™ on Stack Overflow

Array not returning any value using console log

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related