Question

所以我一直在努力研究如何将文本框中的不同值添加到不同的div中。因此div1获取用户键入的第一个内容，div2获取第二个，div3获取第三个，依此类推。每当用户按下“添加”按钮时，无论用户输入什么，都将被添加到其上方的Div之一。现在我通过按“添加”将文本框的值放在第一个div中。如何创建一个允许用户向其他div添加值的函数。我假设你需要一个for循环，但我不知道如何解决它。

这是我的代码：

<html>
<head>
<link rel="stylesheet" type="text/css" href="newTicket2.0.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>


<div id="colorme" style = "cursor:pointer" onClick= "highlightLink()"><p id   = "doubleStuff" ondblclick = "dubleStuff()">check this out</p></div>
<div id="colorme2" style = "cursor:pointer" onClick= "highlightLink2()"><p id = "doubleStuff2" ondblclick = "dubleStuff2()">check this out</p></div>

<p id = "putstuff"></p>
<br>
<br>
<br>
<br>
<div id = "workInfo1" style = "cursor:pointer"><p id = "addingInfo"></p>  </div>
<div id = "workInfo12" style = "cursor:pointer"><p id = "addingInfo1"></p>    </div>
<div id = "workInfo13" style = "cursor:pointer"><p id = "addingInfo2"></p></div>
<div id = "workInfo14" style = "cursor:pointer"><p id = "addingInfo3"></p></div>
<br>
<br>
<textarea name="workInfo" cols="60" rows="5" id="workInfo">
</textarea>
<button type = "button" name = "addWorkInfo" id = "addWorkInfo" onclick =    "workInfoAdd()">Add</button>
<script>
function highlightLink(){
var highL = document.getElementById('colorme');
var highL2 = document.getElementById('colorme2');
highL.style.backgroundColor = 'red';
highL2.style.backgroundColor = 'transparent';
};
function highlightLink2(){
var highL = document.getElementById('colorme');
var highL2 = document.getElementById('colorme2');
highL.style.backgroundColor = 'transparent';
highL2.style.backgroundColor = 'red';
};
function dubleStuff(){
var x = "You double clicked it";
document.getElementById('putstuff').innerHTML = x;
};
function dubleStuff2(){
var x = "different stuff";
document.getElementById('putstuff').innerHTML = x;
};
function workInfoAdd(){
var z = document.getElementById('workInfo')
document.getElementById('addingInfo').innerHTML = z.value

    if (z.value === null || z.value === ""){
    alert('please enter work info');
    }
    else {
    z.value = "";
   }
};
</script>
</body>
</html>

这样的事情会起作用。

  var i = document.getElementById('addingInfo');
  for(i = 0; i < 4; i++){
  document.getElementbyId('workInfo').value = i //or some other variable that specifies the "adding info"

非常感谢任何帮助。如上所述，每次用户按下ADD后，它们放入文本框的值将被添加到后续div中。首先添加到第一个div，第二个到第二个div，依此类推。

Answer 1

看看这是不是你想要的。我为所有p标签添加了一个类，它将包含单击后的信息。

HTML

MyClass

的javascript

<p id = "putstuff"></p>
<br>
<br>
<br>
<br>
<div id = "workInfo1" style = "cursor:pointer"><p class ="addingInfo" id = "addingInfo"></p>  </div>
<div id = "workInfo12" style = "cursor:pointer"><p class ="addingInfo" id = "addingInfo1"></p>    </div>
<div id = "workInfo13" style = "cursor:pointer"><p class ="addingInfo" id = "addingInfo2"></p></div>
<div id = "workInfo14" style = "cursor:pointer"><p class ="addingInfo" id = "addingInfo3"></p></div>
<br>
<br>
<textarea name="workInfo" cols="60" rows="5" id="workInfo">
</textarea>
<button type = "button" name = "addWorkInfo" id = "addWorkInfo" onclick ="workInfoAdd()">Add</button>

http://jsfiddle.net/okLme061/1/

Answer 2

你应该写这样的东西：

var divIndex = 0;

function workInfoAdd() {

  var z = document.getElementById('workInfo');
  var p = document.getElementById('addingInfo' + (divIndex || ''));
  if (!p) {
    return;
  }

  if (z.value === null || z.value === "") {
    alert('please enter work info');
  } else {
    p.innerHTML = z.value;
    z.value = "";
  }

  divIndex++;
};

<div id="workInfo1" style="cursor:pointer;border: dotted 1px">
  <p id="addingInfo"></p>
</div>
<div id="workInfo12" style="cursor:pointer;border: dotted 1px">
  <p id="addingInfo1"></p>
</div>
<div id="workInfo13" style="cursor:pointer;border: dotted 1px">
  <p id="addingInfo2"></p>
</div>
<div id="workInfo14" style="cursor:pointer;border: dotted 1px">
  <p id="addingInfo3"></p>
</div>
<br>
<br>
<textarea name="workInfo" cols="60" rows="5" id="workInfo">
</textarea>
<button type="button" name="addWorkInfo" id="addWorkInfo" onclick="workInfoAdd()">Add</button>

此外，您可以使用document.querySelector（）进行更高级的元素匹配。

var p = document.querySelector('.workInfo' + divIndex + ' > p.addingInfo' + divIndex);

Answer 3

尝试以下代码，但请记住，如果要限制div的数量（即只有3或4个div），则应使用此解决方案，因为如果您想要无限制的div，则必须编写if-else语句每个可能的div：

// Declare variable
var x = 0;

function workInfoAdd(){
// Increment
  x++

// Check increment value
  if(x == 1){
      var z = document.getElementById('workInfo')
      document.getElementById('addingInfo').innerHTML = z.value

         if (z.value === null || z.value === ""){
               alert('please enter work info');
         }
  else { z.value = "";}
     }

// Check increment value
else if(x == 2){
      var z = document.getElementById('workInfo')
      document.getElementById('addingInfo1').innerHTML = z.value

         if (z.value === null || z.value === ""){
         alert('please enter work info');
       }

 else {z.value = "";}
}
  // Check increment value
  else if(x == 3){
        var z = document.getElementById('workInfo')
        document.getElementById('addingInfo2').innerHTML = z.value

if (z.value === null || z.value === ""){
        alert('please enter work info');
}
else {z.value = "";}
  }
 }

https://jsfiddle.net/6byvuzxf/

我之前在评论中提到了检查点。希望这会有所帮助。

Javascript：从文本框中获取值并将其添加到div

3 个答案: