JavaScript HTContents non viene visualizzato correttamente in HTML
-
11-11-2019 - |
Domanda
Ho un modulo HTML, l'utente dovrebbe essere in grado di aggiungere altre caselle di testo per una determinata domanda. Ma prima di qualsiasi input di testo, è presente una selezione del menu a discesa, le caselle di testo diventano visibili dopo ogni selezione (dipende anche dalla modifica della selezione, del conteggio delle caselle di testo visibile). Ecco il JavaScript;
var var1=1;
function addAffiliation(){
var newArea = addNew();
var htcontents ="<input placeholder='categories..'
class='input_box' type='textbox' name='categories[]'
onchange='display(this, 'field2', 'field3', 'field4');'/>"
+ "<br/><br/>";
document.getElementById(newArea).innerHTML = htcontents;
}
function addNew() {
var1=var1+1;
var var2 = document.getElementById('area');
var newdiv = document.createElement('div');
var divIDName = 'Div #'+ var1;
newdiv.setAttribute('id',divIDName);
ni.appendChild(newdiv);
return divIDName;
}
Ma quando viene aggiunto un campo extra, anziché;
<input placeholder="categories.."
class="input_box" type="textbox" name="categories[]"
onchange="display(this, 'field2', 'field3', 'field4');"/>
questo è creato (la posizione del doppio preventivo è sbagliato)
<input placeholder="categories.."
class="input_box' type="textbox" name="categories[]"
onchange="display(this, "field2', 'field3', 'field4');'/>
E a causa di questo problema, Field2-3-4 non è visibile ..
Cosa fare?
Ecco la funzione di visualizzazione
function display(obj,id1,id2,id3) {
txt = obj.options[obj.selectedIndex].value;
document.getElementById(id1).style.display = 'none';
document.getElementById(id2).style.display = 'none';
document.getElementById(id3).style.display = 'none';
if ( txt.match(id1) ) {
document.getElementById(id1).style.display = 'block';
}
if ( txt.match(id2) ) {
document.getElementById(id2).style.display = 'block';
}
if ( txt.match(id3) ) {
document.getElementById(id3).style.display = 'block';
}
}
@Aram,
Voglio avere un menu a discesa;
<option name="first">selection 1</option>
<option name="second">selection 2</option>
Se l'utente seleziona la selezione 1;
field1:< input name="field1".....>
field2:< input name="field2".....>
Se l'utente seleziona la selezione 1;
field3:< input name="field3".....>
field4:< input name="field4".....>
field5:< input name="field5".....>
Quando l'utente finisce di riempire le caselle, potrebbe voler aggiungere altro;
addReference();
Poi di nuovo vede,
<option name="first">selection 1</option>
<option name="second">selection 2</option>
E così via .. è chiaro adesso?
Nessuna soluzione corretta