JS入門存儲的輸入值/名稱的VAR

Question

我有很多pf的投入，我想在（「變」）獲得的價值或輸入一個字符串，這樣我可以在以後轉換爲名稱一個班級，並注入到一個分區...我可能不是最清晰的，但...任何幫助是好的！

網站：http://angusweb.pw

編輯：使用的CSS類是從上面的網站上的框架，我正在開發它

它的下面綠色的大廣場和HTML是

HTML

<div class="setFullWH setFlex setFlexSuperCenter setFlexWrap "> 

<form id="parentProperties" class="setFlex setFlexWrap setFlexRow"> 
<div class="setFlex setBasicGrow setBasicShrink setFlexBasis15 setFlexColumn setNoto"> 
<div class="setBasicGrow setJustifyContentSpcArnd"> 
<input id="flexParent1" name="flexParent" type="radio"> 
<label for="flexParent1">seFlexRow</label> 
</div> 
<div class="setBasicGrow"> 
<input id="flexParent2" name="flexParent" type="radio"> 
<label for="flexParent2">setFlexColumn</label> 
</div> 
<div class="setBasicGrow"> 
<input id="flexParent3" name="flexParent" type="radio"> 
<label for="flexParent3">setFlexHAlign</label> 
</div> 
</div> 
<div class="setFlex setBasicGrow setBasicShrink setFlexBasis15 setFlexColumn setNoto"> 
<div class="setBasicGrow"> 
<input id="flexParent4" name="flexParent" type="radio"> 
<label for="flexParent4">setFlexVAlign</label> 
</div> 
<div class="setBasicGrow"> 
<input id="flexParent5" name="flexParent" type="radio"> 
<label for="flexParent5">setFlexSuperCenter</label> 
</div> 
<div class="setBasicGrow"> 
<input id="flexParent6" name="flexParent" type="radio"> 
<label for="flexParent6">setAlignContentStart</label> 
</div> 
</div> 
<div class="setFlex setBasicGrow setBasicShrink setFlexBasis15 setFlexColumn setNoto"> 
<div class="setBasicGrow"> 
<input id="flexParent7" name="flexParent" type="radio"> 
<label for="flexParent7">setAlignContentEnd</label> 
</div> 
<div class="setBasicGrow"> 
<input id="flexParent8" name="flexParent" type="radio"> 
<label for="flexParent8">setAlignContentCenter</label> 
</div> 
<div class="setBasicGrow"> 
<input id="flexParent9" name="flexParent" type="radio"> 
<label for="flexParent9">setAlignContentStretch</label> 
</div> 
</div> 
<div class="setFlex setBasicGrow setBasicShrink setFlexBasis15 setFlexColumn setNoto"> 
<div class="setBasicGrow"> 
<input id="flexParent10" name="flexParent" type="radio"> 
<label for="flexParent10">setAlignContentSpcBetw</label> 
</div> 
<div class="setBasicGrow"> 
<input id="flexParent11" name="flexParent" type="radio"> 
<label for="flexParent11">setAlignContentSpcArr</label> 
</div> 
<div class="setBasicGrow"> 
<input id="flexParent12" name="flexParent" type="radio"> 
<label for="flexParent12">setAlignItemsStart</label> 
</div> 
</div> 

<div class="setFlex setBasicGrow setBasicShrink setFlexBasis15 setFlexColumn setNoto"> 
<div class="setBasicGrow"> 
<input id="flexParent13" name="flexParent" type="radio"> 
<label for="flexParent13">setAlignItemsEnd</label> 
</div> 
<div class="setBasicGrow"> 
<input id="flexParent14" name="flexParent" type="radio"> 
<label for="flexParent14">setAlignItemsCenter</label> 
</div> 
<div class="setBasicGrow"> 
<input id="flexParent15" name="flexParent" type="radio"> 
<label for="flexParent15">setAlignItemsStretch</label> 
</div> 
</div> 

    <div class="setFlex setBasicGrow setBasicShrink setFlexBasis15 setFlexColumn setNoto"> 
    <div class="setBasicGrow"> 
    <input id="flexParent16" name="flexParent" type="radio"> 
    <label for="flexParent16">setAlignItemsBaseline</label> 
    </div> 
    <div class="setBasicGrow"> 
    <input id="flexParent17" name="flexParent" type="radio"> 
    <label for="flexParent17">setFlexWrap</label> 
    </div> 
    </div> 
    </form> 
</div> 

編輯：我設法得到我想要的值，並將其轉換爲類，並注入想要的div ...問題是，當ic舔其他一些輸入，我想前者生成的類將被刪除或替換，由新一...

Answer 1

你可以得到一個輸入字段的名稱和值在JavaScript中的以下內容：

var inputs = document.getElementsByTagName('input'); 
 
var value = inputs[0].value; 
 
var name = inputs[0].name; 
 

 
console.log(value); 
 
console.log(name);

<input id="inputText" type="text" name="fname" value="a value">

Answer 2

你可以使用jQuery？如果是的話

$('input:radio').each(function(){ 
    $(this).on("click",function(){ 
     console.log($(this).val()); //To get the value, this returns on/off wether your radio is selected or not 
     console.log($(this).attr('name')); // To get the name 
     console.log($(this).next('label').text()); //To get the text inside your label 
    }); 
}) 

• 編輯：新增的jsfiddle https://jsfiddle.net/yingchor/6yqhxa41/3/用於測試和驗證的目的。

Answer 3

您可以在HTML中添加此新元素（<div class="class-name"></div>），並在其類中注入所選輸入（無線電）的名稱。這裏是代碼：

HTML

<div class="class-name"></div>

的JavaScript

$(document).ready(function(){ 
 
    $('#parentProperties input').on('click', function(){ 
 
    className = $(this).attr('name'); 
 
    $('.class-name').addClass(className); 
 
    }); 
 
});

而不是on.('change')on.('click')在這種情況下是完美的。