Блог

У меня есть серия визуализаций, которые загружаются через файлы JSON. Я создал форму в HTML, которая позволяет пользователю выбирать изображение, которое они хотят видеть:

 <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>
  

Визуализация загружается с помощью JavaScript как такового:

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

Я настроил сайт так, что визуализации изменятся, если я вручную обновлю страницу, но как мне заставить визуализацию автоматически обновляться на основе изменения пользователем своего выбора в форме?

Поместите логику загрузки визуализации в событие onchange #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;


}
  

вы можете использовать onchange на javascript. оно появится автоматически без обновления страницы

 <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>