试图将一些Js字符串添加到一起

时间:2017-11-30 15:30:13

标签: javascript jquery html

我有以下表格:

<form id="taskform">

                Habit: <input id="taskname" type="text">

                <textarea id="taskdesc" rows="4" cols="50" name="comment" form="usrform">Description Here...</textarea> 

                <div>
                    Good or Bad:
                    <input type="radio" id="star" name="priority" value="1" checked/><label for="star1" title="Not very important">Good</label>
                    <input type="radio" id="star" name="priority" value="2"/><label for="star2" title="Kinda important">Bad</label>
                </div>

                <br>Starting Date: <input id="deadlinedate" type="date">
                Times you want to do it: <input type="number" id="reminderdays" min="0"> 

                <span type="button" id="sBtn" value="Add Habit" onclick="newElement()" class="addBtn" >Add Habit</span>
                <input type="reset" value="Clear">

            </form>

我有一个js函数,它接受每个字段的值,它应该将它们加在一起:

var li = document.createElement("li");
  var inputValue = document.getElementById("taskname").value;
  var inputDescription = document.getElementById("taskdesc").value;
  var inputStar = document.getElementById("star").value;
  var inputDate = document.getElementById("deadlinedate").value;
  var inputReminderDays = document.getElementById("reminderdays").value;

  var t1 = document.createTextNode(inputValue);
  var t2 = document.createTextNode(inputDescription);
  var t3 = document.createTextNode(inputStar);
  var t4 = document.createTextNode(inputDate);
  var t5 = document.createTextNode(inputReminderDays);

现在我尝试将所有字符串t1,t2,t3,t4t5组合在一起,然后添加到列表对象中。

如果我仅使用t1,它会添加到列表中,通过这样做:

li.appendChild(t1);

如果我使用concat并尝试将t2, t3, t4t5添加到我的t1,然后使用此

li.appendChild(res);

res是我的列表为空且没有添加任何值的所有值的总和,

我不知道该怎么做,我不知道为什么concat或+不起作用。

由于某些原因,我无法获得我的约会和收音机的价值。

1 个答案:

答案 0 :(得分:2)

如果你想做的就是组合字符串,那么不要试试这个:

var t1 = document.createTextNode(inputValue+' '+inputDescription+' '+inputStar+' '+inputDate+' '+inputReminderDays);

更新:

&#13;
&#13;
var output = document.getElementById('output');

function newElement() {
  var li = document.createElement("li");
  var inputValue = document.getElementById("taskname").value;
  var inputDescription = document.getElementById("taskdesc").value;
  var inputStar1 = document.getElementById("star1");
  var inputStar2 = document.getElementById("star2");
  var inputDate = document.getElementById("deadlinedate").value;
  var inputReminderDays = document.getElementById("reminderdays").value;

  // Since you only have two radio buttons you can use a ternary to get the right value base on if oneis checked or not.
  var inputStar = inputStar1.checked ? inputStar1.value : inputStar2.value;

  var t1 = document.createTextNode(inputValue + ', ' + inputDescription + ', ' + inputStar + ', ' + inputDate + ', ' + inputReminderDays);
  li.appendChild(t1);
  output.appendChild(li);
}
&#13;
<form id="taskform">
  Habit: <input id="taskname" type="text"><br/>
  <textarea id="taskdesc" rows="4" cols="50" name="comment" form="usrform" placeholder="Description Here..."></textarea>
  <div>
    Good or Bad:
    <input type="radio" id="star1" name="priority" value="1" checked/><label for="star1" title="Not very important">Good</label>
    <input type="radio" id="star2" name="priority" value="2" /><label for="star2" title="Kinda important">Bad</label>
  </div>

  <br>Starting Date: <input id="deadlinedate" type="date"> Times you want to do it: <input type="number" id="reminderdays" min="0" value="1">

  <button type="button" id="sBtn" value="Add Habit" onclick="newElement()" class="addBtn">Add Habit</button>
  <input type="reset" value="Clear">
</form>
<hr/>
<ul id="output">
</ul>
&#13;
&#13;
&#13;