JavaScript for WordPress › Forums › Vanilla JavaScript › 1.3.11 – Change the label
- This topic has 3 replies, 2 voices, and was last updated 7 years, 5 months ago by Zac Gordon.
-
AuthorPosts
-
November 1, 2016 at 11:05 pm #14614JasonParticipant
I 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 GordonKeymasterHey @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 #14629JasonParticipantAh ha! Got it! That’s what happens when I watch to many videos in one sitting.
November 2, 2016 at 12:33 pm #14672Zac GordonKeymasterWell 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.