How do I make a string from javascript appear in the html when certain checkboxes are clicked?

Welcome to Stack Overflow! I hope you find some useful answers here!

It looks like you're trying to alter the rendered HTML on a page when a checkbox is clicked.

The problem with the fragment above is that it's run only once, and you probably need to listen to events.

Events are a whole new world for a new dev -- but don't worry, you got this!

Basically, events are signals that stuff happened. So you need a piece of code to fire when the checkbox was clicked. If you're using native JavaScript, that might be something like this:

const el = document.getElementById("egg");
el.addEventListener("click", ev => {
  const message = el.checked
    ? "You can make a fried egg with egg!"
    : "You can't make fried eggs at all!";
  document.getElementById("make").innerHTML = message;
});

Now, every time the "egg" element is clicked, that code above is run, updating the inner html of the "make" element.

To make it work you'd need to put an event listener (just a usual function) on your checkbox that would process every change of the input's value and, depending on whether this value is true or false you can update the value of your output.

You can run the code snippet and see the implementation details.

function updateResult(checkbox) {
  const make = document.getElementById("make");
  make.innerHTML = checkbox.checked === true 
    ? "You can make a fried egg with egg!"
    : "";
}

<div>
  <input type="checkbox" id="egg" name="egg" onchange="updateResult(this);">
  <label for="egg">Egg</label>
</div>
<div id="make"></div>

You're almost on the right track. However, the will run only once (and immediately), thereby giving no results. For this "bind" an event listener. This will make sure that every time the checkbox is clicked, a function you define is executed. Like so -

const check_box = document.getElementById("egg");

// this function decides what message to set and shows it
function cbClicked(event){
  let message = "";
  //check if box checked
  if(check_box.checked) {
    message = "You can make a fried egg with egg!";
  }
  //box not checked
  else {
    message = "You can't make fried eggs at all!";
  }
  //set message
  document.getElementById("make").innerHTML = message;
}

//add an eventlistener by telling what 'even' to listen for
// and what function to run
check_box.addEventListener("click", cbClicked);

<div>
  <input type="checkbox" id="egg" name="egg">
  <label for="egg">Egg</label>
</div>
<div id="make"></div>

Notice how I passed a function as an argument to .addEventListener() , that's possible and also completely normal. The passed function is called a callback function. You can even define it entirely inside the .addEventListener() in which case you don't even need to set a name for that function like so-

.addEventListener('event_name',function(event){
//body of function
})

The first argument event is the event that occurred which is automatically passed by the event handler. I didn't use it here though.