JavaScript for WordPress › Forums › Vanilla JavaScript › 1.3.11 – Change the label
- This topic has 3 replies, 2 voices, and was last updated 8 years, 3 months ago by
Zac Gordon.
-
AuthorPosts
-
November 1, 2016 at 11:05 pm #14614
Jason
ParticipantI am practicing cloning nodes and making some changes. I was able to change the place holder text for the 2nd field but am having trouble changing the actual label (from “Field” to “Field 2” or whatever). Here is the code with my additions. I am getting a “Uncaught TypeError: Cannot read property ‘innerText’ of undefined(…)” error when I try to change the label text. What am I missing here?
var fieldsList = document.querySelector( '.fields' ), firstField = fieldsList.children[0], firstFieldInput = firstField.querySelector( 'input' ), firstFieldIdStr = firstFieldInput.getAttribute( 'id' ), firstFieldPlaceholder = firstFieldInput.getAttribute( 'placeholder' ), secondField = firstField.cloneNode( true ), secondFieldInput = secondField.querySelector( 'input' ), secondFieldLabel = secondField.querySelector( 'label' ), secondFieldIdStr = updateIdStr( firstFieldIdStr ), secondFieldPlaceholder = secondField.querySelector( 'input' ); secondFieldText = secondFieldLabel.innerText; console.log( secondFieldText ); secondFieldLabel.setAttribute( 'label', secondFieldIdStr ); secondFieldText.innerText( secondFieldIdStr ); secondFieldInput.setAttribute( 'id', secondFieldIdStr ); secondFieldInput.setAttribute( 'name', secondFieldIdStr ); secondFieldLabel.setAttribute( 'for', secondFieldIdStr ); secondFieldPlaceholder.setAttribute( 'placeholder', 'Field 2 Text' ); fieldsList.appendChild( secondField ); function updateIdStr( value ) { var strArray = value.split( '-' ), id = strArray[ strArray.length - 1 ], newId = parseInt( id ) + 1; strArray[ strArray.length - 1 ] = newId; return strArray.toString().replace( ',' , '-' ); }
November 1, 2016 at 11:31 pm #14621Zac Gordon
KeymasterHey @Jason,
A few little tweaks, take a look at this and let me know if you can make sense of the differences. Small stuff:
var fieldsList = document.querySelector( '.fields' ), firstField = fieldsList.children[0], firstFieldInput = firstField.querySelector( 'input' ), firstFieldIdStr = firstFieldInput.getAttribute( 'id' ), firstFieldPlaceholder = firstFieldInput.getAttribute( 'placeholder' ), secondField = firstField.cloneNode( true ), secondFieldInput = secondField.querySelector( 'input' ), secondFieldLabel = secondField.querySelector( 'label' ), secondFieldIdStr = updateIdStr( firstFieldIdStr ), secondFieldPlaceholder = secondField.querySelector( 'input' ); secondFieldText = secondFieldLabel.innerText; console.log( secondFieldLabel ); secondFieldLabel.setAttribute( 'label', secondFieldIdStr ); secondFieldLabel.innerHTML = 'Field 2'; secondFieldInput.setAttribute( 'id', secondFieldIdStr ); secondFieldInput.setAttribute( 'name', secondFieldIdStr ); secondFieldLabel.setAttribute( 'for', secondFieldIdStr ); secondFieldPlaceholder.setAttribute( 'placeholder', 'Field 2 Text' ); fieldsList.appendChild( secondField ); function updateIdStr( value ) { var strArray = value.split( '-' ), id = strArray[ strArray.length - 1 ], newId = parseInt( id ) + 1; strArray[ strArray.length - 1 ] = newId; return strArray.toString().replace( ',' , '-' ); }
November 1, 2016 at 11:39 pm #14629Jason
ParticipantAh ha! Got it! That’s what happens when I watch to many videos in one sitting.
November 2, 2016 at 12:33 pm #14672Zac Gordon
KeymasterWell its also a good sign when it’s just little things like this causing problems 😉
-
AuthorPosts
- You must be logged in to reply to this topic.