根据用户输入的HTML格式刷新图像

Question

I have a series of visualizations that are loaded via JSON files. I've created a form in HTML that allows the user to select the image they want to see:

<form action="#">
    <fieldset>
        <label for="selector"><b>Select a visualization</b></label>
        <select name="selector" id="selector">
            <option value="one">One</option>
            <option value="two">Two</option>
            <option value="three">Three</option>
        </select>
    </fieldset>
</form>

The visualization is loaded with JavaScript as such:

var s = document.getElementsByName('selector')[0];
var text = s.options[s.selectedIndex].value;          
var imageURL = "viz/" + text + ".json";
var spec = imageURL;

I've got the site set up so that the visualizations will change if I manually refresh the page, but how do I get the visualization to automatically refresh based on the user changing their selection in the form?

Answer 1

Put your visualization load logic to onchange event of #selector:

<select name="selector" id="selector" onchange="changeVisualization()">
    <option value="one">One</option>
    <option value="two">Two</option>
    <option value="three">Three</option>
</select>


function changeVisualization(){

var s = document.getElementsByName('selector')[0];
var text = s.options[s.selectedIndex].value;          
var imageURL = "viz/" + text + ".json";
var spec = imageURL;


}

Answer 2

you can use onchange on javascript. it will automatically appear without refreshing the page

<input type='file' name='file' accept="image/*" onchange="loadFile(event)" value = "logo1.png" />
<center>
    <img  src="logo1.png" id="output"  width="310" align = "center"> 
</center>
</div>

Javascript:

<script>
   var loadFile = function(event) {
       var reader = new FileReader();
       reader.onload = function(){
           var output = document.getElementById('output');
           output.src = reader.result;
       };
       reader.readAsDataURL(event.target.files[0]);
   };
</script>