How can i set a custom width and height for the images in my javascript function?-CodePudding

I am trying to set a custom width and height for the url images in my javascript function. Could someone show me a simple way to achieve this? Currently they are different sizes and I would like to be able to control each ones dimensions separately.

var IMAGE_SOURCE = "";
var IMAGE_EXTENSION = "";

// const IMAGE_SOURCE = "https://example.com/images/";
// const IMAGE_EXTENSION = ".png";

function tests() {
  let combo = document.getElementById("string_determine");
  let div = document.getElementById("mybox");
  let string_determine;

  switch (combo.options[combo.selectedIndex].text) {
    case '"red"   "blue"':
      string_determine = "purple";
      div.style.color = "purple";
      IMAGE_SOURCE = "https://www.kindpng.com/picc/m/48-486841_purple-paint-splatter-clipart-purple-paint-splatter-clip";
      IMAGE_EXTENSION = ".png";
      break;
    case '"blue"   "green"':
      string_determine = "turquoise";
      div.style.color = "turquoise";
      IMAGE_SOURCE = "https://p.kindpng.com/picc/s/428-4289893_turquoise-splotch-svg-clip-arts-yellow-colour-splash";
      IMAGE_EXTENSION = ".png";
      break;
    case '"green"   "red"':
      string_determine = "brown";
      div.style.color = "brown";
      IMAGE_SOURCE = "https://www.pngkey.com/png/detail/28-287400_splatter-vectors-photos-and-psd-files-brown-paint";
      IMAGE_EXTENSION = ".png";
      break;

    default:
      string_determine = "NONE";
  }

  let myBoxHTML = `<p>${string_determine}</p><img src="${IMAGE_SOURCE}${string_determine}${IMAGE_EXTENSION}">`;
  console.log(myBoxHTML);
  document.getElementById("mybox").innerHTML = myBoxHTML;
}

<!doctype html>
<html>
<select name="string_determine" id="string_determine">
  <option value=>Select Value</option>
  <option value='"red"   "blue"'>"red"   "blue"</option>
  <option value='"blue"   "green"'>"blue"   "green"</option>
  <option value='"green"   "red"'>"green"   "red"</option>
</select>

<button onclick="tests()">Yes</button>

<div >
  <h3>Selection</h3>
  <div id="mybox" >
  </div>
</div>

<script src="script.js" async defer></script>

</html>

CodePudding user response：

Set it using the width="" and height="" HTML properties, like this:

const MY_WIDTH = 300
const MY_HEIGHT = 80

var IMAGE_SOURCE = "";
var IMAGE_EXTENSION = "";

// const IMAGE_SOURCE = "https://example.com/images/";
// const IMAGE_EXTENSION = ".png";

function tests() {
  let combo = document.getElementById("string_determine");
  let div = document.getElementById("mybox");
  let string_determine;

  switch (combo.options[combo.selectedIndex].text) {
    case '"red"   "blue"':
      string_determine = "purple";
      div.style.color = "purple";
      IMAGE_SOURCE = "https://www.kindpng.com/picc/m/48-486841_purple-paint-splatter-clipart-purple-paint-splatter-clip";
      IMAGE_EXTENSION = ".png";
      break;
    case '"blue"   "green"':
      string_determine = "turquoise";
      div.style.color = "turquoise";
      IMAGE_SOURCE = "https://p.kindpng.com/picc/s/428-4289893_turquoise-splotch-svg-clip-arts-yellow-colour-splash";
      IMAGE_EXTENSION = ".png";
      break;
    case '"green"   "red"':
      string_determine = "brown";
      div.style.color = "brown";
      IMAGE_SOURCE = "https://www.pngkey.com/png/detail/28-287400_splatter-vectors-photos-and-psd-files-brown-paint";
      IMAGE_EXTENSION = ".png";
      break;

    default:
      string_determine = "NONE";
  }

  let myBoxHTML = `<p>${string_determine}</p><img src="${IMAGE_SOURCE}${string_determine}${IMAGE_EXTENSION}" width="${MY_WIDTH}" height="${MY_HEIGHT}">`;
  console.log(myBoxHTML);
  document.getElementById("mybox").innerHTML = myBoxHTML;
}

<!doctype html>
<html>
<select name="string_determine" id="string_determine">
  <option value=>Select Value</option>
  <option value='"red"   "blue"'>"red"   "blue"</option>
  <option value='"blue"   "green"'>"blue"   "green"</option>
  <option value='"green"   "red"'>"green"   "red"</option>
</select>

<button onclick="tests()">Yes</button>

<div >
  <h3>Selection</h3>
  <div id="mybox" >
  </div>
</div>

<script src="script.js" async defer></script>

</html>

CodePudding user response：

You might also define all properties (url, title, width, height etc.) in an object like so:

const images = {
  red_blue: {
    string_determine: "purple",
    color: "purple",
    src:
      "https://www.kindpng.com/picc/m/48-486841_purple-paint-splatter-clipart-purple-paint-splatter-clip",
    ext: ".png",
    width: 120,
    height: 240
  },
}

You would load the current settings by the current select value.

const images = {
  red_blue: {
    string_determine: "purple",
    color: "purple",
    src:
      "https://www.kindpng.com/picc/m/48-486841_purple-paint-splatter-clipart-purple-paint-splatter-clip",
    ext: ".png",
    width: 120,
    height: 240
  },

  blue_green: {
    string_determine: "turquoise",
    color: "turquoise",
    src:
      "https://p.kindpng.com/picc/s/428-4289893_turquoise-splotch-svg-clip-arts-yellow-colour-splash",
    ext: ".png",
    width: 240,
    height: 240
  },
  green_red: {
    string_determine: "brown",
    color: "brown",
    src:
      "https://www.pngkey.com/png/detail/28-287400_splatter-vectors-photos-and-psd-files-brown-paint",
    ext: ".png",
    width: 320,
    height: 240
  }
};

const combo = document.getElementById("string_determine");
const mybox = document.getElementById("mybox");

function tests() {
  let value = combo.value;
  let props = images[value];
  let url = props.src   props.string_determine   props.ext;
  let imgEl = mybox.querySelector('img');
  let caption = mybox.querySelector('p');
  // create caption p and img if not existing
  if(!imgEl || !caption){
    imgEl = document.createElement('img');
    caption = document.createElement('p');
    mybox.appendChild(caption)
    mybox.appendChild(imgEl)
  }
  imgEl.src=url;
  imgEl.width=props.width;
  imgEl.height=props.height;
  caption.textContent = props.string_determine;
}

img{
  transition: 0.3s
}

<select name="string_determine" id="string_determine" onchange="tests()">
  <option value=>Select Value</option>
  <option value='red_blue'>"red"   "blue"</option>
  <option value='blue_green'>"blue"   "green"</option>
  <option value='green_red'>"green"   "red"</option>
</select>

<button onclick="tests()">Yes</button>

<div >
  <h3>Selection</h3>
  <div id="mybox" >
    
  </div>
</div>