javascript capture every value in a div

jquery each
jquery append
jquery get data attribute value from element
javascript set height of div dynamically
javascript get div height dynamically
jquery css
jquery set data attribute value
clear div content jquery

I have a div in which I render through javascript inputs and text dynamically. I am trying to capture the text of this div (both input values and text).

My first step if to capture the parent div:

let answerWrapper = document.getElementById("typing-answer-wrapper");

The issue now is that using the innerHTML will give me the whole html string with the given tags and using the inerText will give me the text, excluding the tags.

In the following case scenario:

the console inspect is:

What is the way to capture: $2.4 if the inputs have 2 and 4 and $null.null if the inputs are blank.

Any help is welcome

You could iterate over all of the element's child nodes and concatenate their wholeText or value else 'null'. For inputs the wholeText will be undefined. If they have no value we'll return 'null'. Be aware that spaces and line-breaks will also be included so you may want to strip these later (or skip them in the loop) but as a proof of concept see the following example:

var typingAnswerWrapper = document.getElementById("typing-answer-wrapper");
function getVal(){ 
  var nodeList = typingAnswerWrapper.childNodes;
  var str = "";
  for (var i = 0; i < nodeList.length; i++) {
    var item = nodeList[i];
    str+=(item.wholeText || item.value || "null");
  }
  console.log(str);
}
getVal();
//added a delegated change event for demo purposes:
typingAnswerWrapper.addEventListener('change', function(e){
  if(e.target.matches("input")){
    getVal();
  }
});
<div id="typing-answer-wrapper">$<input type="number" value=""/>.<input type="number" value="" />
</div>

.data(), The new data value; this can be any Javascript type except undefined . Since jQuery 3, every two-character sequence of "-" (U+002D) followed by a lowercase ASCII letter in a key Store then retrieve a value from the div element. The object can be used directly to get data values (but note that property names originally  Set default value for struts 2 autocompleter. jquery,jsp,struts2,struts2-jquery,struts2-jquery-plugin. You should use the value attribute as suggested by @Choatech: value false false String "Preset the value of input element." The value specified, however, should be one of the keys listed in your cityList, not some random value.

Here's how you could do it :

function getValue() {
  var parent = document.getElementsByClassName('typing-answer-wrapper')[0],
    text = [];
  const children = [...parent.getElementsByTagName('input')];
  children.forEach((child) => {
    if (child.value == '')
      text.push("null")
    else
      text.push(child.value)
  });
  if (text[0] != "null" && text[1] == "null") text[1] = "00";
  document.getElementById('value').innerHTML = "$" + text[0] + "." + text[1]
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<div class="typing-answer-wrapper">
  $
  <input type="number"> .
  <input type="number">
</div>

<button onclick="getValue()">get value</button>

<div id="value"></div>

element.querySelectorAll, Get the element with id="myDIV" (a div), then get all elements inside div with class="example" var x = document.getElementById("myDIV"). There are two possible values of the capture option: The code sets click handlers on every element in the document to see which ones DIV → FORM → BODY

You can fetch input feild values by their respective ids $('#input_feild_1').val() will give the first feild value and similarly $('#input_feild_2').val() for second feild and contruct use them to construct whatever as u wish. As in your case this should work value_1 = $('#input_feild_1_id').val() value_2 = $('#input_feild_2_id').val()

you need something like "$ + value_1 + . + value_2"

jQuery empty() Method, Remove the content of all <div> elements: $("button").click(function(){ Note: This method does not remove the element itself, or its attributes. Tip: To remove the  The every() method checks if all elements in an array pass a test (provided as a function). The every() method executes the function once for each element present in the array: If it finds an array element where the function returns a false value, every() returns false (and does not check the remaining values) If no false occur, every() returns true

jQuery height() Method, Example. Return the height of a <div> element: FIRST matched element. When this method is used to set height, it sets the height of ALL matched elements. Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML.

Document.getElementsByClassName(), The element on which it is called will be used as the root of the search. Examples​. Get all elements that have a class of 'test': document. In the Javascript code, Firstly we can assign the html element to the variable with the help of document.querySelector () function After that we can attach, a click event to parent div and child

Get All the Elements inside a DIV Element in JavaScript, Let's add more <div> with values, inside the parent div. I'll show you how you can get all the children using the children Property in JavaScript. jQuery Solution: Get​  Mouse Capture is the strangest of the three concepts presented here, and can be quite tricky to visualize at first. Mouse Capture passes all the events on a document to one element. So, if a given element has the mouse capture, then all the events that happen to the document are passed to this element.

Comments
  • Write the HTML as HTML not as a console inspect
  • post your html also
  • That looks like angular syntax. Why do you want to do these things using DOM API? (Or is this a third party website and you're trying to get values from some elements?)
  • Thank you @Islam Elshobokshy although "$" and "." are not standard characters. Like I said in the description, the content is rendered dynamically and can be any character. Thank you for the effort though.
  • He's neither using ids nor using jquery.