Update rendering dynamically (on button click)

[ChenZhongPu]

I would like to re-rendering the <pre> in the JS click event. The core logic is to update the content of <pre>, and call pseudocode.renderElement again. But re-rendering fails and it still shows the content before updating.

    const textInput = document.getElementById("input");
    const output = document.getElementById("output");

    const updateButton = document.getElementById("generate");
    updateButton.addEventListener("click", () => {
      const inputValue = textInput.value;
      output.innerHTML = inputValue;
      pseudocode.renderElement(output);
    });

[SaswatPadhi]

Hi,

Sorry about the delayed response.

The renderElement function replaces the <pre> element with a new element that contains the rendered output. The rendered output is not simply inserted inside the <pre> element. See:

pseudocode.js/pseudocode.js

Line 64 in 1ab6334

elem.replaceWith(newElem);

One approach to achieve what you're trying here is to use renderToString^# instead. In that case, your #output element could just be a div and you could insert the rendered HTML into it. Something like:

const textInput = document.getElementById("input");
const output = document.getElementById("output");

const updateButton = document.getElementById("generate");
updateButton.addEventListener("click", () => {
  output.innerHTML = pseudocode.renderToString(textInput.value);
});

I tried it out at on https://jsfiddle.net/f7hme2dz/.

^# renderToString is fully supported only on KaTeX and on MathJax 3.x backends.

I will mark this issue as resolved and pin it. Please feel free to reopen if you face any further issues.