How can I input the same number multiple times on an HTML page and within code?-CodePudding

I have a very basic question regarding an HTML page. I would like to create a template for an HTML webpage and on that page I need to reference a number (property ID) multiple times on the actual web page and in the code to link to image sources. I would like to be able to type the property ID once into the template code and that code will be populated into all the places I need it for the page to display properly vs having to type the 5-8 digit number over and over and over.

Below is a basic example of the template page - instead of having to write property ID 123456 multiple times, I would like to be able to write it once into the template or JS and then have it populated into the areas where the property ID needs to repeat. The property ID will also be a folder containing images for the webpage. Each folder will contain 1-25 images named 1.jpg, 2.jpg, 3.jpg and so on so I'll need to be able to use the property ID to be a part of the source code. Currently the template looks like this...

<html>
<body>
<p>You are viewing Property #123456</p>
<img src="123456/1.jpg">
<img src="123456/2.jpg">
<img src="123456/3.jpg">
<img src="123456/4.jpg">
<p>Would you like more information regarding Property #123456?</p>
</body>
</html>

I would like to be able to quickly make new pages using a template without needing to copy & paste the property ID into each page multiple times.

I envision something like this...

<html>
<body>
<p>You are viewing Property #<span class="propID"></span></p>
<img src="******/1.jpg">
<img src="******/2.jpg">
<img src="******/3.jpg">
<img src="******/4.jpg">
<p>Would you like more information regarding Property #<span class="propID">?</p>
</body>
</html>

With the ***** in the img src referencing the propID somehow using JS but I do not know how to do this.

What's the best/easiest way to go about doing this? TIA

CodePudding user response：

Use an element (such as <span>) to display your number. Consider following a JS tutorial (such as at w3schools.com) to learn more about manipulating HTML with JavaScript.

You are viewing <span class="property-number"></span>
<img id="img1" />

<script>
    const property_number = /* your number */;
    document.getElementsByClassName("property-number")
            .forEach(element => element.innerText = property_number);
    document.getElementById("img1").src = property_number   "/image_1.jpg";
</script>

CodePudding user response：

Taken answer from Imagifight

You have to just give array value to run the function

Used for loops and some basics , if need to know something from code or want to ask a doubt feel free to comment

const property_number = ["12345", "35245", "45234"];
var mainCont = document.getElementsByClassName("mainContainer");

for (let i = 0; i < mainCont.length; i  ) {

  var mainContId = mainCont[i].getElementsByTagName("SPAN")
  var mainContIdImg = mainCont[i].getElementsByTagName("IMG")

  for (let j = 0; j < mainContId.length; j  ) {
    mainContId[j].innerHTML = property_number[i]
  }

  for (let k = 0; k < mainContIdImg.length; k  ) {
    mainContIdImg[k].src = property_number[i]   k   "/image_1.jpg";
  }
}

<div class="mainContainer">
  <p>You are viewing Property #<span class="propID"></span></p>
  <img src="" class="imgSrc">
  <img src="" class="imgSrc">
  <img src="" class="imgSrc">
  <p>Would you like more information regarding Property #<span class="propID"></span>?</p>
</div>

<div class="mainContainer">
  <p>You are viewing Property #<span class="propID"></span></p>
  <img src="" class="imgSrc">
  <img src="" class="imgSrc">
  <img src="" class="imgSrc">
  <p>Would you like more information regarding Property #<span class="propID"></span>?</p>
</div>

<div class="mainContainer">
  <p>You are viewing Property #<span class="propID"></span></p>
  <img src="" class="imgSrc">
  <img src="" class="imgSrc">
  <img src="" class="imgSrc">
  <p>Would you like more information regarding Property #<span class="propID"></span>?</p>
</div>

Updated the answer according to user need

Here what I have done :

Taken one time input of product Id in the const property_number
Get value from .mainContainer class in a variable mainCont which will be called later on
Now taken the value of all span tags (Can also call by className and it is also recommended) and inputted the product ID to each span tag using the for loop.

Note to Remember: product ID value is only valid inside the .mainContainer conatiner and it is not defined outside of it , so keep this in mind . As span tag is called from variable mainCont which .mainContainer

Now all the img tag is taken from the .mainContainer class , whose src is entered using another for loop with src as productID/(count of img tag).jpg . So the first value is taken from variable property_number and second value is taken from the j value of for loop, as loop starts from 0 so added 1 to it.

Note to Remember : As https:// is not used so the domain will start from the folder where your html is saved . So try to start from https:// and give the path else save images in the sub-folders where html is saved .

That's all done :)

const property_number = 12345;
let mainCont = document.getElementsByClassName("mainContainer");

let mainContId = mainCont[0].getElementsByTagName("SPAN")
let mainContIdImg = mainCont[0].getElementsByTagName("IMG")

for (let i = 0; i < mainContId.length; i  ) {
  mainContId[i].innerHTML = property_number
}

for (let j = 0; j < mainContIdImg.length; j  ) {
  mainContIdImg[j].src = property_number   "/"   (j   1)   ".jpg";
  document.getElementsByClassName("demo")[0].innerHTML = mainContIdImg[1].src;
  document.getElementsByClassName("demo1")[0].innerHTML = "https://hello/"  property_number   "/"   (j   1)   ".jpg";
   document.getElementsByClassName("demo2")[0].innerHTML = "F:/UsersPitures/Screenshoos"  property_number   "/"   (j   1)   ".jpg";
}

<div class="mainContainer">
  <p>You are viewing Property #<span class="propID"></span></p>
  <img src="" class="imgSrc">
  <img src="" class="imgSrc">
  <img src="" class="imgSrc">
  <p>Would you like more information regarding Property #<span class="propID"></span>?</p>

  <p>My wish to write the productId 5 more times :</p>
  #<span class="propID"></span> #
  <span class="propID"></span> #
  <span class="propID"></span> #
  <span class="propID"></span> #
  <span class="propID"></span>
</div>
<hr>
<b>Below the line is of no use content but for understanding only</b>
<p>My wish to write the productId 5 more times but outside the class ".mainContainer":</p>
#<span class="propID"></span> #
<span class="propID"></span> #
<span class="propID"></span> #
<span class="propID"></span> #
<span class="propID"></span>

<p>The src of one of the image is :</p>
<div class="demo"></div>
<p>The src of any image with use of https:// </p>
<div class="demo1"></div>
<p>The src of any image with use of https:// </p>
<div class="demo2"></div>