I want to create some text in a contentediable by checking radios (without pressing a button at the end). I’ve created this but don’t understand why it doesn’t work :/
I guess there is a problem with the function’s argument but I can’t figure out why.
Thanks if you help me 🙂
function genereItem(x){
document.getElementById("item"+x).innerHTML = document.querySelector("input[name="+x+"]:checked").value;
}.editable{
border: solid black 1px;
}<div>
<div>itemA1
<input id="yesA1" name="A1" type="radio" value="item A1 = yes," onchange="genereItem(A1)"/>
<label for="yesA1">yes</label>
<input id="noA1" name="A1" type="radio" value="item A1 = no," onchange="genereItem(A1)"/>
<label for="noA1">no</label>
<input id="NTA1" name="A1" type="radio" value="item A1 = NT," checked="checked" onchange="genereItem(A1)"/>
<label for="NTA1">NT</label>
</div>
<div>itemA2
<input id="yesA2" name="A2" type="radio" value="item A2 = yes." onchange="genereItem(A2)"/>
<label for="yesA2">yes</label>
<input id="noA2" name="A2" type="radio" value="item A2 = no." onchange="genereItem(A2)"/>
<label for="noA2">no</label>
<input id="NTA2" name="A2" type="radio" value="item A2 = NT." checked="checked" onchange="genereItem(A2)"/>
<label for="NTA2">NT</label>
</div>
<div>itemB1
<input id="yesB1" name="B1" type="radio" value="item B1 = yes," onchange="genereItem(B1)"/>
<label for="yesB1">yes</label>
<input id="noB1" name="B1" type="radio" value="item B1 = no," onchange="genereItem(B1)"/>
<label for="noB1">no</label>
<input id="NTB1" name="B1" type="radio" value="item B1 = NT," checked="checked" onchange="genereItem(B1)"/>
<label for="NTB1">NT</label>
</div>
<div>itemB2
<input id="yesB2" name="B2" type="radio" value="item B2 = yes." onchange="genereItem(B2)"/>
<label for="yesB2">yes</label>
<input id="noB2" name="B2" type="radio" value="item B2 = no." onchange="genereItem(B2)"/>
<label for="noB2">no</label>
<input id="NTB2" name="B2" type="radio" value="item B2 = NT." checked="checked" onchange="genereItem(B2)"/>
<label for="NTB2">NT</label>
</div>
<div class="editable" contenteditable="true">
<div>
<string id="itemA1"></string>
<string id="itemA2"></string>
<p/>
</div>
<div>
<string id="itemB1"></string>
<string id="itemB2"></string>
<p/>
</div>
</div>
</div>
