用户提交后如何执行HTML代码

Question

我希望用户加载Movie.swf的大小，他们的选择。我有两个输入框，一个是宽度，另一个是高度。我怎样才能在提交后用用户设置的大小执行对象？我不知道如何使这个工作。我将非常感谢任何帮助

//Let the user set the size for Movie.swf
<label for="fname">Width</label><br>
  <input type="text" id="objW"><br><br>

<label for="fname">Height</label><br>
  <input type="text" id="objH"><br><br>

//Movie.swf will load with a new size from the input box
<input type="submit" value="Execute"><br>

//Execute this line when submit
<object width="" height="" data="/Movie.swf"></object>

Answer 1

你需要为这部分添加javascript代码，除非你已经在使用任何框架，同时你应该将输入包裹在表单标签中，并为表单提交事件添加事件监听器。在目前的情况下，下面的代码应该可以工作

<script>
    const objW= document.getElementById('objW');
    const objH = document.getElementById('objH');
    const submitInput = document.querySelector('input[type=submit]');
    const body = document.getElementsByTagName('body')[0];
    submitInput.addEventListener('click', e=>{
       e.preventDefault();


       /*if you want to display the object element after clicking input submit and replace all input fields*/
       body.innerHTML = `<object width="${objW.value}" height="${objH.value}" data="/Movie.swf"></object>`;

        /*or you can use following code if you always have object element in your html*/
       const object = document.getElementsByTagName('object')[0];
       object.setAttribute("height", objH.value);
       object.setAttribute("width", objW.value);

    });
</script>