Html - How to update a div value with js?

Wayfarerdesert
January 19, 2024
152 views
0 votes
2 Answers

i need some help,

i need that only the selected template is displayed on the screen, and all others are removed, so the expected result should be that those values:
<div class="city">City<span>,</span></div> <div class="country">Co</div>
would be replaced from the selected template values.

In short, what I need to do is for the user to choose a city from all those shown and when they click on the desired city, js obtains the values and shows them on the screen, removing all the other options.

const userLocationContainer = document.querySelector("[data-location-container]")
const locationTemplate = document.getElementById("location-template");

function setValue(selector, value, { parent = document } = {}) {
    parent.querySelector(`[data-${selector}]`).textContent = value
}


userLocationContainer.addEventListener('click', handleLocation);

function handleLocation(location) {
    const clonedTemplate = locationTemplate.content.cloneNode(true);
    setValue("city", location.city, { parent: clonedTemplate });
    setValue("country", location.country, { parent: clonedTemplate });

    // Clear previous content of userLocation and append the cloned template
    
    userLocationContainer.innerHTML = '';
    selectedLocation.append(...clonedTemplate.childNodes);
}

</div>
      <div class="locations" data-location-container>
        <div class="mainPlace" id="userLocation">
          <div class="city">City<span>,</span></div>
          <div class="country">Co</div>
        </div>
      </div>
    </div>
  </header>

  <template id="location-template" data-location>
    <div class="mainPlace-template">
      <div class="city" data-city></div><span>,</span>
      <div class="country" data-country></div>
    </div>
  </template>

Any help will be greatly appreciated.

Answers

There is a canonical way of doing this, which is to use a common class, and on click, hide all elements of that class and then show the selected one.

var hide = (elem) => {
  elem.style.display = "none";
}

var hideNShow = (e) => {
  var cities = document.querySelectorAll(".city");
  cities.forEach(hide);
  document.getElementById("City_" + e.target.value).style.display = "block";
}

document.querySelectorAll("input[type=button]").forEach((elem) => elem.addEventListener("click", hideNShow));

<input type="button" value="A" />
<input type="button" value="B" />
<input type="button" value="C" />
<input type="button" value="D" />

<div id="City_A" class="city">City A</div>
<div id="City_B" class="city">City B</div>
<div id="City_C" class="city">City C</div>
<div id="City_D" class="city">City D</div>

From what I understand, you need kind of this feature (assuming that you need dropdown as mentioned users will choose)

<body>
  <div class="locations" data-location-container>
    <div class="mainPlace" id="userLocation">
      <div class="city">City<span>,</span></div>
      <div class="country">Co</div>
    </div>
  </div>

  <select id="locationDropdown" onchange="handleLocation(this)">
    <option value="" selected disabled>Select a City</option>
    <option value="City1,Country1">City1</option>
    <option value="City2,Country2">City2</option>
    <!-- Add more options as needed -->
  </select>

  <template id="location-template" data-location>
    <div class="mainPlace-template">
      <div class="city" data-city></div><span>,</span>
      <div class="country" data-country></div>
    </div>
  </template>

  <script>
    function handleLocation(selectedDropdown) {
      const locationContainer = document.querySelector('[data-location-container]');
      const locationTemplate = document.getElementById('location-template');
      const clonedTemplate = locationTemplate.content.cloneNode(true);

      const selectedOption = selectedDropdown.options[selectedDropdown.selectedIndex];
      if (!selectedOption || !selectedOption.value) {
        return; // No valid selection
      }

      const [city, country] = selectedOption.value.split(',');

      setValue("city", city, { parent: clonedTemplate });
      setValue("country", country, { parent: clonedTemplate });

      // Clear previous content of userLocation and append the cloned template
      locationContainer.innerHTML = '';
      locationContainer.append(...clonedTemplate.childNodes);

      // Reset the dropdown to the default state
      selectedDropdown.selectedIndex = 0;
    }

    function setValue(key, value, options) {
      const element = options.parent.querySelector(`[data-${key}]`);
      if (element) {
        element.innerText = value;
      }
    }
  </script>
</body>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How to update a div value with js?

Answers