Javascript 更改脚本中变量的用户输入_Javascript_Jquery

Javascript 更改脚本中变量的用户输入

javascript jquery

Javascript 更改脚本中变量的用户输入,javascript,jquery,Javascript,Jquery,我正在网页上使用小部件，但正在学习编码这是我在页面中插入的代码： <script type="text/javascript" src="https://api.bistri.com/bistri.conference.widget.js"></script> <div class="bistri-conference" data-appid="hidenfromquestion" data-appkey="hiddenfromquesti

我正在网页上使用小部件，但正在学习编码

这是我在页面中插入的代码：

<script type="text/javascript"     src="https://api.bistri.com/bistri.conference.widget.js"></script>
<div class="bistri-conference"
    data-appid="hidenfromquestion"
    data-appkey="hiddenfromquestion"
    data-room="meetingroom1"
    data-capacity="10"
    data-media-controls="true"
    data-audio-codec="ISAC/16000"
    data-audio-birate="40"
    data-video-birate="400"
    data-device="320x240:12"
    data-chat="True">
</div>

其中一个变量数据室我希望通过用户输入的方式更改值。我需要什么脚本/代码来请求用户输入，然后替换默认值meetingroom1

谢谢

让我们说你有意见

<input id="myInput" type="text"/>

一种方法，在本例中使用纯JavaScript，如下所示：；首先显示HTML：

<!-- wrapping the <inputs> used to update the data in a <form> -->
<form action="#" method="post">
    <!-- using <label> elements to allow clicking the text to
         focus the relevant <input> -->
    <label>Change the meeting room venue:
        <!-- using a custom data-* attribute to
             clearly denote the data to be
             updated by the <input> element's value -->
        <input data-attribute="room" type="text" />
    </label>
    <label>Change the venue capacity:
        <input data-attribute="capacity" type="text" />
    </label>
    <!-- a <button> to trigger the updates: -->
    <button type="button" id="update">Update</button>
</form>
<!-- your own posted element, unchanged -->
<div class="bistri-conference" data-appid="hidenfromquestion" data-appkey="hiddenfromquestion" data-room="meetingroom1" data-capacity="10" data-media-controls="true" data-audio-codec="ISAC/16000" data-audio-birate="40" data-video-birate="400" data-device="320x240:12" data-chat="True"></div>

//命名函数：函数更新数据{ //使用Function.prototype.call来使用 //Array.prototype.slice转换节点列表 //由要转换的“querySelectorAll”返回 //放入一个数组： var inputArray=Array.prototype.slice.callthis.form.querySelectorAll'input'，0， //检索此函数要更新的元素： toUpdate=document.querySelector'.bistri conference'； //在元素数组上迭代，使用 //Array.prototype.forEach： inputArray.forEachfunctioninput{ //“输入”是当前数组元素 //从我们迭代的数组中。 //如果的值不是 //的默认值：如果input.value！==input.defaultValue{ //我们更新 //元素，该元素相当于中保存的值 //元素的“数据属性”， //将其设置为在中输入的值： toUpdate.dataset[input.dataset.attribute]=input.value； } }; } //绑定“click”事件处理程序函数注意缺少 //按钮函数名称后的括号数目： getElementById'update'。addEventListener'click'，updateData；标签{ 显示：块； } 分区[资料室]：：在{ 内容：'当前值：'数据室；显示：块； } 分区[资料室]：：之后{ 内容：'当前值：'属性数据容量；显示：块； } 更改会议室地点：更改场馆容量：使现代化

如果你看起来像这样。。。那么试试这个

 <head>

        <script type="text/javascript"     src="https://api.bistri.com/bistri.conference.widget.js"></script>
        <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
        <script type="text/javascript">
                function Onblur(event) {
                     var element=document.getElementById("something").value; 
                     $(".bistri-conference").attr("data-room", element);   
                }

            </script>
     </head>

    <body>
          <div class="bistri-conference"
            data-appid="hidenfromquestion"
            data-appkey="hiddenfromquestion"
            data-room="meetingroom1"
            data-capacity="10"
            data-media-controls="true"
            data-audio-codec="ISAC/16000"
            data-audio-birate="40"
            data-video-birate="400"
            data-device="320x240:12"
            data-chat="True">  
         <input type="text" id="something" onblur="javascript:Onblur(event)" value="Text field" />
         </div>
    </body>

function updateData() {
    var inputArray = Array.prototype.slice.call(this.form.querySelectorAll('input'), 0),
        toUpdate = document.querySelector('.bistri-conference');

    inputArray.forEach(function (input) {
        if (input.value !== input.defaultValue) {
            toUpdate.dataset[input.dataset.attribute] = input.value;
        }
    });
}

document.getElementById('update').addEventListener('click', updateData);

 <head>

        <script type="text/javascript"     src="https://api.bistri.com/bistri.conference.widget.js"></script>
        <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
        <script type="text/javascript">
                function Onblur(event) {
                     var element=document.getElementById("something").value; 
                     $(".bistri-conference").attr("data-room", element);   
                }

            </script>
     </head>

    <body>
          <div class="bistri-conference"
            data-appid="hidenfromquestion"
            data-appkey="hiddenfromquestion"
            data-room="meetingroom1"
            data-capacity="10"
            data-media-controls="true"
            data-audio-codec="ISAC/16000"
            data-audio-birate="40"
            data-video-birate="400"
            data-device="320x240:12"
            data-chat="True">  
         <input type="text" id="something" onblur="javascript:Onblur(event)" value="Text field" />
         </div>
    </body>