亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

在范圍滑塊內切換大小寫JavaScript

在范圍滑塊內切換大小寫JavaScript

MMTTMM 2021-04-16 18:25:52
我試圖制作一個范圍滑塊，如果我用滑塊選擇一個值，它將顯示一件事，如果我選擇另一個值，它將顯示另一件事。因此，我嘗試使用開關盒：如果您的值是0-，請給我顯示此消息；如果您的值是30，請給我顯示另一條消息。問題是它根本不起作用…。在這里，我添加了我的代碼：！（https://postimg.cc/Lnd1PhSs）所以我的HTML代碼是這樣的：var slider = document.getElementById("myRange");var output = document.getElementById("demo");output.innerHTML = slider.value;slider.oninput = function() {  output.innerHTML = this.value;};switch (output) {  case 0:    document.write("Good job<br />");    break;  case 30:    document.write("Pretty good<br />");    break;  case 60:    document.write("Passed<br />");    break;  case 90:    document.write("Passed<br />");    break;  default:    document.write("Unknown grade<br />");}document.write("Exiting switch block");.slidecontainer {  width: 100%;}.slider {  -webkit-appearance: none;  width: 100%;  height: 5px;  background: grey;  outline: none;  opacity: 0.7;  -webkit-transition: .2s;  transition: opacity .2s;}.slider:hover {  opacity: 1;}.slider::-webkit-slider-thumb {  -webkit-appearance: none;  appearance: none;  width: 25px;  height: 25px;  background: rgb(58, 111, 46);  border-radius: 40px;}.slider::-moz-range-thumb {  width: 25px;  height: 25px;  background: rgb(58, 111, 46);  border-radius: 40px;  border: none;}<input type="range" min="0" max="90" value="0" step="30" class="slider" id="myRange"><p>Value: <span id="demo"></span></p>
查看完整描述

3 回答

?
溫溫醬

TA貢獻1752條經驗 獲得超4個贊

您可以將工作事件應用于元素并移交this。然后，您可以采用該值并將其轉換為數字，因為HTML中輸入的所有結果都是字符串，如果需要，則需要轉換。switch使用嚴格的比較，如果您使用字符串并將值與數字進行比較，則將始終獲得false。


然后，您需要錄入文本。最好的辦法是采用頁面的另一個元素，然后在此處顯示結果。document.write僅在頁面未渲染到末尾且不建議使用時才起作用。


var result = document.getElementById("result"),

    output = document.getElementById("demo");


function update(element) {

    var value = +element.value, // convert to number

        text;


    output.innerHTML = value;


    switch (value) {

        case 0:

            text = "Good job";

            break;

        case 30:

            text = "Pretty good";

            break;

        case 60:

            text = "Passed";

            break;

        case 90:

            text = "Passed";

            break;

        default:

           text = "Unknown grade";

    }

    result.innerHTML = text;

}

<input type="range" min="0" max="90" value="0" step="30" class="slider" id="myRange" onchange="update(this)">

<p>Value: <span id="demo"></span></p>

<p id="result"></p>


查看完整回答
反對 回復 2021-04-29
?
胡子哥哥

TA貢獻1825條經驗 獲得超6個贊

switch塊在oninput回調函數之外，因此如果滑塊的值發生更改，則不會對其進行評估。此外，document.write（）將替換您的整個html文檔。嘗試使用console.log（）代替。最后，this.value的類型為String-在您的switch塊中，您正在檢查整數值。使用parseInt（this.value）將輸入轉換為數字。


  var slider = document.getElementById("myRange");

  var output = document.getElementById("demo");

  output.innerHTML = slider.value;


  slider.oninput = function() {

    output.innerHTML = this.value;

    switch (parseInt(this.value)) {

      case 0:

        console.log("Good job<br />");

        break;


      case 30:

        console.log("Pretty good<br />");

        break;


      case 60:

        console.log("Passed<br />");

        break;


      case 90:

        console.log("Passed<br />");

        break;

      default:

        console.log("Unknown grade<br />");


    }


  };

.slidecontainer {

  width: 100%;

}


.slider {

  -webkit-appearance: none;

  width: 100%;

  height: 5px;

  background: grey;

  outline: none;

  opacity: 0.7;

  -webkit-transition: .2s;

  transition: opacity .2s;

}


.slider:hover {

  opacity: 1;

}


.slider::-webkit-slider-thumb {

  -webkit-appearance: none;

  appearance: none;

  width: 25px;

  height: 25px;

  background: rgb(58, 111, 46);

  border-radius: 40px;

}


.slider::-moz-range-thumb {

  width: 25px;

  height: 25px;

  background: rgb(58, 111, 46);

  border-radius: 40px;

  border: none;

}

<input type="range" min="0" max="90" value="0" step="30" class="slider" id="myRange">

<p>Value: <span id="demo"></span></p>


查看完整回答
反對 回復 2021-04-29
?
叮當貓咪

TA貢獻1776條經驗 獲得超12個贊

只需少量Javascript修復即可更新您的代碼。試試這個，希望對您有所幫助。謝謝


var slider = document.getElementById("myRange");

var output = document.getElementById("demo");

var message = document.getElementById("message");

output.innerHTML = slider.value;


slider.oninput = function() {

  output.innerHTML = this.value;

  switch (parseInt(this.value)) {

  case 0:

    messageAppend("Good job");

    break;


  case 30:

    messageAppend("Pretty good");

    break;


  case 60:

    messageAppend("Passed");

    break;


  case 90:

    messageAppend("Passed");

    break;

    

  default:

    messageAppend("Unknown grade");

  }

};



function messageAppend(text) {

  message.innerText = text;

}

.slidecontainer {

  width: 100%;

}


.slider {

  -webkit-appearance: none;

  width: 100%;

  height: 5px;

  background: grey;

  outline: none;

  opacity: 0.7;

  -webkit-transition: .2s;

  transition: opacity .2s;

}


.slider:hover {

  opacity: 1;

}


.slider::-webkit-slider-thumb {

  -webkit-appearance: none;

  appearance: none;

  width: 25px;

  height: 25px;

  background: rgb(58, 111, 46);

  border-radius: 40px;

}


.slider::-moz-range-thumb {

  width: 25px;

  height: 25px;

  background: rgb(58, 111, 46);

  border-radius: 40px;

  border: none;

}

<input type="range" min="0" max="90" value="0" step="30" class="slider" id="myRange">

<p>Value: <span id="demo"></span></p>

<div id="message"></div>


查看完整回答
反對 回復 2021-04-29
  • 3 回答
  • 0 關注
  • 217 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號