Question posted in
You can find the official documentation here.

Please help for my HTML and Javascript task – Jquery ajax

I am trying to extract Class and IDs from a HTML document. I want result showing in <textarea class="output"></textarea> when clicking on SUBMIT button.
HTML:

  <div id="fullwidth">
    <div id="wrapper">
      <div id="content">
        <div class="fifty">
          <textarea class="input">
            <div class="font step_footer">
              <div class="container">
                <div class="font-in">
                  <ul class="d-flex flex-wrap">
                    <li class="col-md-3 col-4">
                      <div class="font-list">
                        <p>Notre équipeM<br> reconnus<br>obtient<br>istance</p>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </textarea>
          <div id="button-div">
            <button id="button">Submit</button>
          </div>
        </div>
        <div class="fifty">
          <textarea class="output"></textarea>
        </div>
      </div>
    </div>
  </div>

javascript:

  const main = () => {
    console.log(emptyInnerHTML(document.body))
  }
  
  const emptyInnerHTML = (element) => {
    return renderHTML(describeHTML(element)).innerHTML
  }
  
  const describeHTML = (node) => {
    return ({
      tagName: node.tagName,
      id: node.id || undefined,
      classList: [...node.classList],
      children: [...node.childNodes]
        .filter(child => child.nodeType != Node.TEXT_NODE && child.tagName !== 'SCRIPT')
        .map(child => describeHTML(child))
    })
  }
  
  const renderHTML = (tree) => {
    let node = document.createElement(tree.tagName)
    if (tree.id) node.setAttribute('id', tree.id)
    if (tree.classList && tree.classList.length) node.className = tree.classList.join(' ')
    if (tree.children && tree.children.length) {
      tree.children.forEach(child => node.appendChild(renderHTML(child)))
    }
    return node
  }
  
  main()

Result is coming when check on Codepen Console tab. I created a Codepen page for it. You can see it in this Codepen link:
https://codepen.io/coderco/pen/BajJMav
I want to make it as result coming when I click on SUBMIT button.

Tags:

2

Answers


  1. 0 
    <div id="button-div">
    <button id="button" type="submit">Submit</button>
</div>
    Login or Signup to reply.
  2. 0

    Working Code !!

    Observe inside the right output textarea, on clicking the submit button, you will be able to see the same result which were you see on load currently.

    const main = () => {
  document.getElementById("resultArea").value = emptyInnerHTML(document.body);
};

const emptyInnerHTML = (element) => {
  return renderHTML(describeHTML(element)).innerHTML;
};

const describeHTML = (node) => {
  return {
tagName: node.tagName,
id: node.id || undefined,
classList: [...node.classList],
children: [...node.childNodes]
  .filter(
    (child) =>
      child.nodeType != Node.TEXT_NODE && child.tagName !== "SCRIPT"
  )
  .map((child) => describeHTML(child))
  };
};

const renderHTML = (tree) => {
  let node = document.createElement(tree.tagName);
  if (tree.id) node.setAttribute("id", tree.id);
  if (tree.classList && tree.classList.length)
node.className = tree.classList.join(" ");
  if (tree.children && tree.children.length) {
tree.children.forEach((child) => node.appendChild(renderHTML(child)));
  }
  return node;
};

const onSubmit = () => {
  main();
};
    #fullwidth {
  width: 100%;
  display: inline-block;
  font-family: Arial;
}

#wrapper {
  margin: 0 auto;
  width: 1100px;
}

#content {
  width: 100%;
  display: inline-block;
}

.fifty {
  width: 50%;
  float: left;
  padding: 5px;
  box-sizing: border-box;
}

.input,
.output {
  width: 100%;
  height: 200px;
  border: 1px solid #ccc;
  border-radius: 9px;
  padding: 10px;
  box-sizing: border-box;
}

#button-div {
  width: 100%;
  display: inline-block;
}

#button {
  float: right;
  width: 125px;
  height: 50px;
  border-radius: 9px;
  border: 1px solid #db4907;
  background: #ec350b;
  color: #fff;
  font-size: 18px;
  text-transform: uppercase;
}

#button:hover {
  color: #000;
}
    <div id="fullwidth">
  <div id="wrapper">
    <div id="content">
      <div class="fifty">
        <textarea class="input">
<div class="font step_footer">
<div class="container">
<div class="font-in">
<ul class="d-flex flex-wrap">
<li class="col-md-3 col-4">
<div class="font-list">
<img src="/img/font-img1.png" width="145" alt="img">
<p>Notre équipeM<br> reconnus<br>obtient<br>istance</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</textarea>
        <div id="button-div">
          <button id="button" type="submit" onclick="onSubmit()">Submit</button>
        </div>
      </div>
      <div class="fifty">
        <textarea id="resultArea" class="output"></textarea>
      </div>
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search