Try to search your question here, if you can't find : Ask Any Question Now ?

How to update image src attribute using user input value

HomeCategory: stackoverflowHow to update image src attribute using user input value
Avatarpragati asked 2 weeks ago

I am building a simple photo editor app using imgix, and I want the image src attribute to be updated when a user input fields receive values. Is there a way to append my new parameters onto the end of the src url?

I have been able to use template literals to create a new url, however I haven’t been able to figure out how or if I can update the image src as the user types. Or if the only way to do this would be submitting the changes and show the new image on page reload. I have tried reassigning image.src to the new url, but that hasn’t worked.

HTML:

<form id="form" class="input-container">
  <input type="text" placeholder="Enter Text" id="title"/>
  <input type="text" placeholder="Enter Hexcode Color" id="overlay" />
  <input type="submit" value="Apply Changes" id="edit-submit">
</form>


JavaScript:
let form = document.getElementById("form");
let titleInput = document.getElementById("title");
let encodedTitle = encodeURI(titleInput);
let overlayColor = document.getElementById("overlay");
let image = document.getElementById("image");
let timeout = null;

form.onkeyup = function(e) {
  let encodedTitle = "&txt=" + encodeURI(titleInput.value);
  let newColor = "&blend=" + overlayColor.value;
  let url = new URL(`${image.src}`);
  url = `${url}${encodedTitle}${newColor}`;
  console.log(url);
  document.getElementById("url-result").value = url;
  image.src = url;
};

I am able to grab the values but I haven’t figured out what I’m needing to do to apply it to the img src url.

1 Answers
Best Answer
AvatarArben answered 2 weeks ago
Your Answer

13 + 17 =

Popular Tags

WP Facebook Auto Publish Powered By : XYZScripts.com