JavaScript for WordPress Forums Vanilla JavaScript 1.3.11 – Change the label

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #14614
    Jason
    Participant

    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( ',' , '-' );
    
     }
    
    #14621
    Zac Gordon
    Keymaster

    Hey @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( ',' , '-' );
    
     }
    
    #14629
    Jason
    Participant

    Ah ha! Got it! That’s what happens when I watch to many videos in one sitting.

    #14672
    Zac Gordon
    Keymaster

    Well its also a good sign when it’s just little things like this causing problems 😉

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.