How do I use JS in html without DOM

Question

I'm very new to programming. Ive used w3schools and freecodecamp to learn. I know the basics within objects, arrays, functions and loops. I know that I can write something like this to change an image.

function a(b) {var t; if(b === 1){t = "image.jpg"} document.getElementById("aide").src= t; } <br>button onclick="a(1)" <br>
img id="aide src="some.image"

How would a professional programmer do this? Is that called dom as i need to write onclick in html?

and.. I can make object/arrays such as var x = [{ rock: "Metallica" }];. I want a type="text" bar on a webpage that displays Metallica when a user writes Rock in the text field and submits it. How, and without dom if possible?

I’d start again with a [JS tutorial](//developer.mozilla.org/docs/Web/JavaScript/Guide) and [reference](//developer.mozilla.org/docs/Web/JavaScript/Reference) that isn’t outdated and inaccurate. Inline event handlers like `onclick` are [not recommended](/q/11737873/4642212). They are an [obsolete, hard-to-maintain and unintuitive](/a/43459991/4642212) way of registering events. Always [use `addEventListener`](//developer.mozilla.org/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these) instead. — Sebastian Simon, Nov 22 '21 at 18:07

score 0 · Answer 1 · answered Nov 22 '21 at 21:03

If you want to change an image, you can change its source:

// setting the variables used later
var btnNewImage = document.getElementById('btn-new-image')
var imageContainer = document.getElementById('image')
var counter = 1

// creating the string that will
// be the src of the image
function getImgSrc(currentCounter) {
  // the current counter makes it possible to
  // load different images on click
  return "https://picsum.photos/200/300?random=" + currentCounter
}

// setting the src attribute of the imageContainer
// modifying the counter
function setImage() {
  imageContainer.src = getImgSrc(counter)
  // counter is mutated, so if it's called again
  // it will be the next number
  counter++
}

// adding event listener to the button
// instead of onclick handler
btnNewImage.addEventListener('click', function() {
  // calling the setImage function, that will set
  // the src attribute of the image
  setImage()
})

// calling the setImage function for the first time
// so an image shows up on page load
setImage()

<button id="btn-new-image">NEW RANDOM IMAGE</button><br />
<img id="image" src="" />

The snippet above uses some things not really advised:

var instead of let & const
using that certain variables & functions are in the same scope (mutating counter, calling setImage() function, referencing imageContainer inside the setImage() function, etc.)

These are to be avoided, but I think at this point it makes no difference.

The API I used for images: Lorem Picsum

The trick is that addEventListener does not do anything - until there's a click on the button it's been registered to. When the click happens, it executes the function that's added to it.

How do I use JS in html without DOM

1 Answers1