CODEWITHSUNDEEP
javascript
Ulquiorra Schiffer
Ulquiorra Schiffer

Reputation: 219

How to display my console.log result into input type text?

I have a function where 2 data will be joined if they have the same level. My target is, how can I show my console.log result to my HTML? I want to show it in input type=" text" form. This is my current work. It only shows in "<span". Any help will be appreciated. Thank you.

const source = [
    {id: 1, name: 'player1', level: 2},
    {id: 3, name: 'player2', level: 2},


]

//this function is for combining 2 arrays in 1 if they have the same level
const combine = (source) => {
    return source.reduce((acc,curr) => {
        if(acc[curr.level]) 
            acc[curr.level].push(curr);
        else
            acc[curr.level] = [curr];   
        return acc;
    },{})
}

//this function is for displaying console.log result to my html. But the thing is it is not in input type, it's only in the span 
(function (logger) {
    console.old = console.log;
    console.log = function () {
        var output = "", arg, i;

        for (i = 0; i < arguments.length; i++) {
            arg = arguments[i];
            output += "<span class=\"log-" + (typeof arg) + "\">";

            if (
                typeof arg === "object" &&
                typeof JSON === "object" &&
                typeof JSON.stringify === "function"
            ) {
                output += JSON.stringify(arg);   
            } else {
                output += arg;   
            }

            output += "</span>&nbsp;";
        }

        logger.innerHTML += output + "<br>";
        console.old.apply(undefined, arguments);
    };
})(document.getElementById("logger"));

// Testing
console.log('Result', combine(source));
<pre id="logger"></pre> // display the result here

Upvotes: 1

Views: 2066

Answers (3)

Anu
Anu

Reputation: 123

`

   <input type="text" placeholder="enter your name" id="txtInputData">
   <button onclick="displayName()">Click Me</button>
   <p id="show_name">
   </p>

`

<script>
   function displayName() {
      var originalName = document.getElementById("txtInputData").value;
      document.getElementById("show_name").innerHTML = "Your Name is :" + originalName;
   }
</script>

Upvotes: 0

Swati
Swati

Reputation: 28522

You can loop through your array values using forEach loop then inside this append new inputs with values inside some variable using += and then finally append this in your DOM.

Demo Code :

const source = [{
    id: 1,
    name: 'player1',
    level: 2
  },
  {
    id: 3,
    name: 'player2',
    level: 2
  },


]
const combine = (source) => {
  return source.reduce((acc, curr) => {
    if (acc[curr.level])
      acc[curr.level].push(curr);
    else
      acc[curr.level] = [curr];
    return acc;
  }, {})
}
var result = combine(source)
var html = ""
var keys = Object.keys(result) //if there more then one keys i.e : 2..
for (var i = 0; i < keys.length; i++) {
  console.log("Keys " + keys[i])
  //loop through json array
  result[keys[i]].forEach(function(val, index) {
  //check if index value is `0`..change name. 
    var ids = index == 0 ? "id[]" : "idside[]"
    var name = index == 0 ? "name[]" : "nameside[]"
    var levels = index == 0 ? "level[]" : "levelside[]"
    html += `<input type="text" name="${ids}" value="${val.id}">
<input type="text" name="${name}" value="${val.name}">
<input type="text" name="${levels}" value="${val.level}">`
  })
}
document.getElementById("result").innerHTML = html //add html to div
<div id="result">
</div>

Upvotes: 2

h-sifat
h-sifat

Reputation: 1595

To set text inside an input element you need to use the value property.

const input = document.getElementById("input")
function showData() {
  input.value = "Any String value here"
}
<input type="text" id="input">
<button onclick="showData()">Show Data</button>

Upvotes: 0

Related Questions