JavaScript for WordPress › Forums › Vanilla JavaScript › 1.3.11 – Change the label › Reply To: 1.3.11 – Change the label
November 1, 2016 at 11:31 pm
#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( ',' , '-' );
}