Function only working properly on second click, need help seeing my mistake

Get Help JavaScript
,
#1

I’m trying to build a practice site that will allow the user to add ‘tiles’, either text or images to a page using DOM manipulation. I need to measure the length of text inputs to determine what class to give to each new ‘tile’. The problem is that no matter what I seem to try I can not get the function that gets and writes the value to a tile to read what is in the input field correctly the first time. It always just reads and writes the default value of the input field on the first click then works after.

// variable to hold the text submission element
let textEntryBox = document.getElementById('textUpload').value;
let textEntryLength = document.getElementById('textUpload').value.length;
// variables to create new text tiles
let textTile = document.createElement("span");
let node = document.createTextNode(document.getElementById('textUpload').value);




// checks text element size

let newTileSize = textEntryBox.length;

function checkTextSize() {
  inputSize = textEntryBox.value.length;


  newTileSize = inputSize;
};




// creates new text tile
function createNewTextTile() {




  var elementToAppend = document.getElementById('one');
  if (submitState == 'text') {
    node = document.createTextNode(newTileSize); //document.getElementById('textUpload').value);
    textEntryBox = document.getElementById('textUpload');
    var builtNode = textTile.appendChild(node);
    var x = document.getElementById('one').appendChild(builtNode);


  }

and the html it is attached to

<div class='textUploadHolder'>

          <label class='textUpload' for='textUpload'>Upload Text:</label>

          <input class='textUpload' id='textUpload' type='text' name='textUpload' onclick="checkTextSize() "onchange="checkTextSize()" onblur="checkTextSize()"></input>

</div>

any help is greatly appreciated

#2

The input value is dynamic. Should we be so specific with our cached nodes?

const textEntryBox = document.querySelector('#textUpload');

That’s all we should need to cache. Everything else can be got by polling the value property. Rethink your logic along these lines.

That line is a complete blur, starting with the ENDTAG. <input> is a void element, which means no endtag.

The only time we care about the text size is ONCHANGE. The other two listeners are just a waste, literally, since they are consuming memory and clock ticks. Besides, you have a script so use it. Write the listener in the script, not in the HTML.

As for the label, put the ENDTAG where the </input> is and drop the for attribute. It won’t be needed. And since the parent is so specific, anyway, transfer all style rules to that and drop the class names.

The name attribute is only needed if this is being sent via POST or GET. If there is no Submit button, that attribute can be dropped, too.

When things do not work the way we expect, best to make things simpler, not more complex. That way we get to the bottom, without spiraling.

1 Like
#3

Thank you so much! This fixed my problem instantly.
Still learning about linking my javascript to my html so I ended up just going scattershot and making more of a mess.
I thought I needed the name element to link the label to the element. Is that not correct?

I’ll definitely try to be more analytical in the future and not just keep adding stuff when my first idea doesn’t work. I know that’s the way to not end up with a mess but I ended up letting my frustration and impatience get the better of me and I kept adding more on despite not solving my issue.

Thank you again!

1 Like