Paul Paul - 4 months ago 8
Javascript Question

How can i get the span inner html values?

Here i need to get "

<div class="set-title">Operations</div>
" in main div have so many div is there all having same class name how can i get span values ?

<div id="page_x002e_data-form_x002e_task-edit_x0023_default-form-fields" class="form-fields">
<div class="set">
<div class="set-title">Operations</div>
<div class="alf-gb">
<div class="alf-u first">
<div class="form-field">
<div class="viewmode-field">
<span class="viewmode-label">Request date:</span>
<span class="viewmode-value" data-datatype="date">16 Jul, 2016</span>
</div>
</div>
</div>
<div class="alf-u">
<div class="form-field">
<div class="viewmode-field">
<span class="viewmode-label">Requestor company:</span>
<span class="viewmode-value" data-datatype="text">UST</span>
</div>
</div>
</div>
<div class="alf-u">
<div class="form-field">
<div class="viewmode-field">
<span class="viewmode-label">Requestor Name:</span>
<span class="viewmode-value" data-datatype="text">ewe</span>
</div>
</div>
</div>
</div>
<div class="alf-gb">
<div class="alf-u first">
<div class="form-field">
<div class="viewmode-field">
<span class="viewmode-label">Requestor Email:</span>
<span class="viewmode-value" data-datatype="text">ewe</span>
</div>
</div>
</div>
<div class="alf-u">
<div class="form-field">
<div class="viewmode-field">
<span class="viewmode-label">Training topic:</span>
<span class="viewmode-value" data-datatype="text">ewe</span>
</div>
</div>
</div>
<div class="alf-u">
<div class="form-field">
<div class="viewmode-field">
<span class="viewmode-label">Mode of Training:</span>
<span class="viewmode-value" data-datatype="text">ILT</span>
</div>
</div>
</div>
</div>
<div class="alf-gb">
<div class="alf-gb">
<div class="alf-gb">
</div>
<div class="set">
<div class="set-title">Operations Requirements</div>
<div class="alf-gb">
<div class="alf-u first">
<div class="form-field">
<div class="viewmode-field">
<span class="viewmode-label">Need to cover prerequisites:</span>
<span class="viewmode-value" data-datatype="text">w</span>
</div>
</div>
</div>
<div class="alf-u">
<div class="form-field">
<div class="viewmode-field">
<span class="viewmode-label">Desired outcomes for students:</span>
<span class="viewmode-value" data-datatype="text">w</span>
</div>
</div>
</div>
<div class="alf-u">
<div class="form-field">
<div class="viewmode-field">
<span class="viewmode-label">ML POC:</span>
<span class="viewmode-value" data-datatype="text">1</span>
</div>
</div>
</div>
</div>
<div class="alf-gb">
<div class="alf-u first">
<div class="form-field">
<div class="viewmode-field">
<span class="viewmode-label">Training budget:</span>
<span class="viewmode-value" data-datatype="double">1</span>
</div>
</div>
</div>
<div class="alf-u">
<div class="alf-u">
</div>
<div class="alf-gb">
<div class="alf-gb">
</div>
<div class="set">
<div class="set-title">Trainer Details</div>
<div class="alf-gb">
<div class="alf-u first">
<div class="form-field">
<label for="page_x002e_data-form_x002e_task-edit_x0023_default_prop_mentoratraining_trainername">
Trainer Name:
<span class="mandatory-indicator">*</span>
</label>
<input id="page_x002e_data-form_x002e_task-edit_x0023_default_prop_mentoratraining_trainername" class="mandatory" type="text" maxlength="1024" value="" tabindex="0" name="prop_mentoratraining_trainername" title="The value cannot be empty." alf-validation-msg="The value cannot be empty.">
</div>
</div>


Please help me out ..

Answer

try this

var labels = document.querySelectorAll( ".viewmode-label" );
var values = document.querySelectorAll( ".viewmode-value" );

var map = {};
for( var counter = 0; counter < labels.length; counter++ )
{
  map[ labels[ counter ].innerHTML ] = values[ counter ].innerHTML
}

//now the map has all the labels against values
console.log( map[ "Request date:" ] );
Comments