Tips for setting and modifying the default selection using JavaScript?

Question

Tips for setting and modifying the default selection using JavaScript?

Programming Dilemma

In my HTML, there is a form structured like this:

<label for="alternativeGraph">Alternative graphs could be seen here:</label>
         <select id="selGraph" onchange="graphUpdate()" aria-label="Graph">
                <option value="1" selected="selected">Graph 1 (default)</option>
                <option value="2">Graph 2</option>
                <option value="3">Graph 3</option>
                <option value="4">Graph 4</option>
                <option value="5">Graph 5</option>
            </select>
      <button type="button" onclick="setDefault()"> Change default graph</button>

The aim is to have Graph 1 load as the default on page load and allow users to change the default graph using the setDefault() function. Here's the JavaScript involved:

function render(filename) {
fetch(filename).then(response  => response.text()).then(textAsString => 
     renderString(textAsString));
}

   
function graphUpdate(){
    let value = document.querySelector('#selGraph');
    let graph = ["graph_1.gv", "graph_2.gv", "graph_3.gv", "graph_4.gv", "graph_5.gv"]
    render(graph[value.selectedIndex]);
    
}

// function setDefault(){ # I am not sure about what should be added here...
//     let new_default_graph = document.querySelector("#selGraph");
//     new_default_graph.value = 
    

// }

Challenges Faced

The primary issue encountered is that upon website loading, despite choosing Graph 1 ("graph_1.gv" file) as the default, it does not display until clicking the dropdown menu. Other graphs are loaded correctly.

Inquiries:

Is there a method to pre-load the graph based on the initial selection? Additionally, how can the setDefault() function be modified so that when users select an option like 3, the website remembers this choice as the default upon refreshing?

javascript

Answer 1

Answer №1

For optimal performance, consider adding a window.onload event handler in your script to trigger the graphUpdate() function after all DOM components have finished loading:

window.onload = graphUpdate;

For saving the selected value persistently in the browser, you can utilize window.localStorage. Modify the event function like this:

window.onload = function() {
  let selected = window.localStorage.getItem('selectedGraph') || 1;
  document.querySelector('#selGraph').selectedIndex = selected;
  graphUpdate();
}

Don't forget to update the graphUpdate function to save the selected value:

function graphUpdate(){
    let value = document.querySelector('#selGraph');
    let graph = ["graph_1.gv", "graph_2.gv", "graph_3.gv", "graph_4.gv", "graph_5.gv"]
    render(graph[value.selectedIndex]);
    window.localStorage.setItem('selectedGraph', value.selectedIndex)
}

Additional information on window.localStorage can be found here: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Answer 2

For optimal performance, consider adding a window.onload event handler in your script to trigger the graphUpdate() function after all DOM components have finished loading:

window.onload = graphUpdate;

For saving the selected value persistently in the browser, you can utilize window.localStorage. Modify the event function like this:

window.onload = function() {
  let selected = window.localStorage.getItem('selectedGraph') || 1;
  document.querySelector('#selGraph').selectedIndex = selected;
  graphUpdate();
}

Don't forget to update the graphUpdate function to save the selected value:

function graphUpdate(){
    let value = document.querySelector('#selGraph');
    let graph = ["graph_1.gv", "graph_2.gv", "graph_3.gv", "graph_4.gv", "graph_5.gv"]
    render(graph[value.selectedIndex]);
    window.localStorage.setItem('selectedGraph', value.selectedIndex)
}

Additional information on window.localStorage can be found here: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Answer 3

Answer №2

If your JavaScript code is executed after the document elements are loaded (by placing the <script> tag after them or using defer), you can simply run the graphUpdate() function.

To store default options, I recommend utilizing localStorage.

Avoid using attribute-based event listeners like onchange and onclick.

<label for="alternativeGraph">Alternative graphs could be seen here:</label>
<select id="selGraph" aria-label="Graph">
  <!-- values are easier to work with than indexes -->
  <option value="graph_1.gv">Graph 1</option>
  <option value="graph_2.gv">Graph 2</option>
  <option value="graph_3.gv">Graph 3</option>
  <option value="graph_4.gv">Graph 4</option>
  <option value="graph_5.gv">Graph 5</option>
</select>
<button type="button" id="setDefaultGraphBtn">Change default graph</button>

// Constants
const DEFAULT_GRAPH_KEY = "default-graph";
const DEFAULT_GRAPH = "graph_1.gv";

// Elements
const graphSelect = document.getElementById("selGraph");
const btn = document.getElementById("setDefaultGraphBtn");

// Functions
const render = async (filename) => {
  const res = await fetch(filename);
  if (!res.ok) {
    throw new Error(`${filename}: ${res.status} ${res.statusText}`);
  }

  renderString(await res.text());
};

const graphUpdate = () => {
  render(graphSelect.value);
};

const setDefaultGraph = () => {
  const val = graphSelect.value;
  localStorage.setItem(DEFAULT_GRAPH_KEY, val);
  graphSelect.querySelectorAll("option").forEach((opt) => {
    // remove any previous "default" text
    opt.textContent = opt.textContent.replace(" (default)", "");
    // add "default" text
    if (opt.value === val) {
      opt.textContent += " (default)";
    }
  });
};

// Bind event listeners
graphSelect.addEventListener("change", graphUpdate);
btn.addEventListener("click", setDefaultGraph);

// Get localStorage value or default
const defaultGraph = localStorage.getItem(DEFAULT_GRAPH_KEY) ?? DEFAULT_GRAPH;

// set default selected
graphSelect.value = defaultGraph;

// Now run functions to initialise
setDefaultGraph();
graphUpdate();

Answer 4

If your JavaScript code is executed after the document elements are loaded (by placing the <script> tag after them or using defer), you can simply run the graphUpdate() function.

To store default options, I recommend utilizing localStorage.

Avoid using attribute-based event listeners like onchange and onclick.

<label for="alternativeGraph">Alternative graphs could be seen here:</label>
<select id="selGraph" aria-label="Graph">
  <!-- values are easier to work with than indexes -->
  <option value="graph_1.gv">Graph 1</option>
  <option value="graph_2.gv">Graph 2</option>
  <option value="graph_3.gv">Graph 3</option>
  <option value="graph_4.gv">Graph 4</option>
  <option value="graph_5.gv">Graph 5</option>
</select>
<button type="button" id="setDefaultGraphBtn">Change default graph</button>

// Constants
const DEFAULT_GRAPH_KEY = "default-graph";
const DEFAULT_GRAPH = "graph_1.gv";

// Elements
const graphSelect = document.getElementById("selGraph");
const btn = document.getElementById("setDefaultGraphBtn");

// Functions
const render = async (filename) => {
  const res = await fetch(filename);
  if (!res.ok) {
    throw new Error(`${filename}: ${res.status} ${res.statusText}`);
  }

  renderString(await res.text());
};

const graphUpdate = () => {
  render(graphSelect.value);
};

const setDefaultGraph = () => {
  const val = graphSelect.value;
  localStorage.setItem(DEFAULT_GRAPH_KEY, val);
  graphSelect.querySelectorAll("option").forEach((opt) => {
    // remove any previous "default" text
    opt.textContent = opt.textContent.replace(" (default)", "");
    // add "default" text
    if (opt.value === val) {
      opt.textContent += " (default)";
    }
  });
};

// Bind event listeners
graphSelect.addEventListener("change", graphUpdate);
btn.addEventListener("click", setDefaultGraph);

// Get localStorage value or default
const defaultGraph = localStorage.getItem(DEFAULT_GRAPH_KEY) ?? DEFAULT_GRAPH;

// set default selected
graphSelect.value = defaultGraph;

// Now run functions to initialise
setDefaultGraph();
graphUpdate();

Tips for setting and modifying the default selection using JavaScript?

Answer №1

Answer №2

Similar questions

Having trouble deciphering this snippet of Express JS source code

Conceal the export capabilities and pagination of DataTables

Move to the following array when clicking PHP (using Ajax, perhaps?)

Error: Attempted to search for 'height' using the 'in' operator in an undefined variable

Encountering a 404 error while attempting to retrieve data from Node.js within a React.js application despite the server being operational

Sort values depending on the value of another key

Position Element on Top of Input Field

There seems to be an issue with the Axios Post not consistently finishing each time

Binding data to custom components in Angular allows for a more flexible

Transform javascript classes into flash

Is there a way to compact this code so that I don't need to repeatedly type it out?

value assigned to ng-model does not update beyond its scope

Tips for integrating AudioControl with Phonegap

What is the reason behind AngularJS recognizing the $index directive and not the $parent directive?

How to properly handle date property in a document when deserializing with Node.js

Issue: A child component's function is unable to update the state of the parent component

Instead of receiving my custom JSON error message, Express is showing the server's default HTML error page when returning errors

Generating fresh object instances and adding them to an array using vanilla JavaScript

Enhancing the functionality of hidden input fields using jQuery

Encountering difficulties in creating an app with Apache Cordova