If true return a string else return another string

Question

Code contains errors: Uncaught SyntaxError: Unexpected token 'if' at undefined:18:22

When uploading to greasyfork I've got that error. The javascript file is:

// ==UserScript==
// @name        Docubuilder
// @namespace   Editors
// @match       *://*
// @grant       none
// @version     1.0
// @author      Josiah
// @description Josiah's Docubuilder builds anything on the current document. This also works on HTML files!
// ==/UserScript==
console.log("Starting to make builder's button so hang on!")
function buildermain() {
  tobuild = prompt("Insert any valid HTML element, cancel or input nothing and a tab will open with a list of HTML elements.")
  if (tobuild == '' || tobuild == null) {
    window.open("https://developer.mozilla.org/en-US/docs/Web/HTML/Element")
  } else {
    mynew = document.createElement(tobuild)
    myhtml = prompt("Text to display...")
    mynew.innerHTML = if (!(myhtml == null)) { return myhtml } else { return 'A random ' + tobuild + '.'}
    document.body.insertBefore(mynew, null)
    alert("Done! Check the bottom of the page!")
  }
}
const builderbutton = document.createElement('button')
builderbutton.onClick = "buildermain()"
builderbutton.innerHTML = "Start building some stuff!"
document.body.insertBefore(builderbutton, document.body.firstChild)

Maybe it was the if, so I'm trying to find a way to return a string to a variable in a single line.

Any help here?

Answer 1

The problem is that if() does not return a value. It will not assign a value to the property innerHTML.

There are some options to solve this.

1. Create a function

   function buildermain() {
      // [...]
      mynew.innerHTML = getHtml(myhtml, tobuild);
      // [...]
   }
   
   const getHtml = (myhtml, tobuild) => {
       if (myhtml !== null) {
          return myhtml;
       }
       return `A random ${tobuild}.`;
   }
   

2. Use the ternary operator

   function buildermain() {
    // [...]
       mynew.innerHTML = myhtml !== null ? myhtml : `A random ${tobuild}.`;
    // [...]
   }
   

3. Use if, else (correct) without direct assignemt to innerHtml

   function buildermain() {
      // [...]
      if (myhtml !== null) { 
          mynew.innerHTML = myhtml;
      } else { 
          mynew.innerHTML = `A random ${tobuild}.`;
      }
      // [...]
   }