Question

我再次去井里寻求帮助......刚接触JavaScript / HTML，我来自C ++背景（即范式），而且我很难理解HTML的边界和的JavaScript。

我正在开发一个使用多个滑块的项目，所以我想创建一个函数来避免无数次重复的JavaScript。

有没有办法可以使用结构来定义span对象的id？

在myDimmer.spanID：

中

myDimmer = {name: "Kitchen Dimmer", spanID: "outdoorKitchenDimVal", deviceNumber: 70};

<span id = "outdoorKitchenDimVal" class="readings">50%</span>

这是我的HTML / JavaScript：

＆＃13;

//var spanID = "outdoorKitchenDimVal";
myDimmer = {
  name: "Kitchen Dimmer",
  spanID: "outdoorKitchenDimVal",
  deviceNumber: 70
};
cabanaDimmer = {
  name: "Cabana Dimmer",
  spanID: "cabanaDimVal",
  deviceNumber: 103
};



// 
function sendVeraDimmer(lightID, value) {
  // alert(lightID + '-' + value);
  //var newValue = document.getElementById("range").innerHTML;
  var request = new XMLHttpRequest();
  var url = 'http://10.0.1.25:3480/data_request?id=action&DeviceNum=' + lightID + '&serviceId=urn:upnp-org:serviceId:Dimming1&action=SetLoadLevelTarget&newLoadlevelTarget=' + value;
  request.open('GET', url);
  request.send();
}

// Updates the slider object's current value
function showVeraValue(newValue, elementID) {
  document.getElementById(elementID).innerHTML = newValue;
}

// This is a simple flexible toggle for binary switches, this works brialliantly for several devices!!
function toggleVeraLight(newValue, lightID) {
  var request = new XMLHttpRequest();
  var url = 'http://10.0.1.25:3480/data_request?id=action&DeviceNum=' + lightID + '&serviceId=urn:upnp-org:serviceId:SwitchPower1&action=SetTarget&newTargetValue=' + newValue;
  request.open('GET', url);
  request.send();
}

＆＃13;

<div id="Patio">
  <hr size="10" NOSHADE>
  <h1><p align="center">Patio</p></h1>
  <hr />
  <div id="patioElements">

    <div id=o utdoorSlider>

      <h2>Kitchen Lights</h2>
      <input id="outdoorKitchenRange" type="range" style="width: 200px; height 40px" min="0" max="100" value="50" step="5" list="settings" oninput="showVeraValue(this.value+ '%', myDimmer.spanID) " onchange="showVeraValue(this.value+ '%', myDimmer.spanID)">
      <datalist id="settings">
        <option>0</option>
        <option>10</option>
        <option>20</option>
        <option>30</option>
        <option>40</option>
        <option>50</option>
        <option>60</option>
        <option>70</option>
        <option>80</option>
        <option>90</option>
        <option>100</option>
      </datalist>
      <span id="outdoorKitchenDimVal" class="readings">50%</span>
      <br/>
      <br/>
      <input type="button" class="button" onclick="sendDimmerValue()" value=U PDATE />
      <br />
      <br />

    </div>


    <div id="extKitchenButton">
      <br />
      <br />
      <input type="button" class="button" value="ON" onclick="sendVeraDimmer(70, 100)">
      <br />
      <input type="button" class="button" value="OFF" onclick="sendVeraDimmer(70, 0)">

    </div>
    <div id="space">
      <hr />
      </div/>
      <div id=c abanaSlider>
        <h2>Cabana Light</h2>
        <input id="cabanaRange" type="range" style="width: 200px; height 40px" min="0" max="100" value="50" step="5" list="settings" oninput="showVeraValue(this.value+ '%', cabanaDimmer.spanID) " onchange="showVeraValue(this.value+ '%', cabanaDimmer.spanID)">
        <datalist id="settings">
          <option>0</option>
          <option>10</option>
          <option>20</option>
          <option>30</option>
          <option>40</option>
          <option>50</option>
          <option>60</option>
          <option>70</option>
          <option>80</option>
          <option>90</option>
          <option>100</option>
        </datalist>
        <span id="cabanaDimVal" class="readings">50%</span>
        <br/>
        <br/>
        <input type="button" class="button" onclick="sendDimmerValue()" value=U PDATE />
        <br />
        <br />

      </div>


      <div id="cabanaButton">
        <br />
        <br />
        <input type="button" class="button" value="ON" onclick="sendVeraDimmer(103, 100)">
        <br />
        <input type="button" class="button" value="OFF" onclick="sendVeraDimmer(103, 0)">
      </div>

      <div id="patioRadioButtons">
        <hr />
        <h2>Under Counter Lights</h2>
        <p>
          <input type="radio" value="0" onclick="toggleVeraLight(this.value, 75)" name="led" />Off
          <input type="radio" value="1" onclick="toggleVeraLight(this.value, 75)" name="led" />On
        </p>

        <hr />
        <h2>Flood Lights</h2>
        <p>
          <input type="radio" value="0" onclick="toggleVeraLight(this.value, 16)" name="led" />Off
          <input type="radio" value="1" onclick="toggleVeraLight(this.value, 16)" name="led" />On
        </p>

        <hr />
        <h2>Master Slider</h2>
        <p>
          <input type="radio" value="0" onclick="toggleVeraLight(this.value, 25)" name="led" />Off
          <input type="radio" value="1" onclick="toggleVeraLight(this.value, 25)" name="led" />On
        </p>

        <hr />
        <h2>Pool Light</h2>
        <p>
          <input type="radio" value="0" onclick="toggleVeraLight(this.value, 17)" name="led" />Off
          <input type="radio" value="1" onclick="toggleVeraLight(this.value, 17)" name="led" />On
        </p>

        <hr />
        <h2>Television</h2>
        <p>
          <input type="radio" value="0" onclick="toggleVeraLight(this.value, 74)" name="led" />Off
          <input type="radio" value="1" onclick="toggleVeraLight(this.value, 74)" name="led" />On
        </p>

        <hr />
        <h2>Cabana Slider</h2>
        <p>
          <input type="radio" value="0" onclick="toggleVeraLight(this.value, 111)" name="led" />Off
          <input type="radio" value="1" onclick="toggleVeraLight(this.value, 111)" name="led" />On
        </p>
      </div>
    </div>
    <hr/>

  </div>

＆＃13;

感谢任何帮助！

使用JavaScript创建函数调用 - 使用变量作为跨度id

0 个答案: