2015-12-30 75 views
0

我有一些變量動態地更改顏色在此:如何分配我在Javascript中從用戶獲得的值?

ctxt.strokeStyle = "black"; 

如何分配或調用函數,我得到的輸入:

function ChangeBackgroundFont(selectTag, type) { 
 
    if (type == "font") { 
 
    // Returns the index of the selected option 
 
    var whichSelected = selectTag.selectedIndex; 
 
    // Returns the selected options values 
 
    var selectState = selectTag.options[whichSelected].text; 
 
    var fontTest = document.getElementById("fontbackgroundTest"); 
 
    if ('fontSizeAdjust' in fontTest.style) { 
 
     fontTest.style.fontSizeAdjust = selectState; 
 
    } else { 
 
     alert("Your browser doesn't support this example!"); 
 
    } 
 
    } else { 
 
    document.getElementById("fontbackgroundTest").style.color = selectTag.value; 
 
    } 
 

 
}
<html> 
 

 
<body> 
 
    <form> 
 

 
    <select name="color" type="text" onchange="ChangeBackgroundFont(this,'background');"> 
 
     <option value="select">Select</option> 
 
     <option value="blue">Blue</option> 
 
     <option value="green">Green</option> 
 
     <option value="white">White</option> 
 
     <option value="black">Black</option> 
 
    </select> 
 
    <span id="fontbackgroundTest">Change font-size-adjust</span> 
 
    </form> 
 
</body> 
 

 
</html>

我應該叫JS功能或分配ID。你可以幫我嗎 ?

例子我想改變基於用戶輸入結果的文本顏色:

// You may want to give your <select> a class or an id to have a more reliable way of retrieving it from JavaScript 
    var select = document.querySelector('select[name="color"]'); 
    var selectState = select.options[select.selectedIndex].text; 

    ctxt.strokeStyle = selectState.toLowerCase(); 
+4

我不明白,從你的問題的問題。該代碼似乎可以從代碼片段中工作。 – Xotic750

+0

我有單獨的Javascript文件。其中,一個變量用於分配字體筆劃樣式顏色。我必須從用戶輸入中獲取顏色並將該值分配給該變量。 –

+0

你的問題還不清楚,你能詳細說明你想要的結果嗎?我能從你的問題中瞭解到,你希望文本在選擇字段更改值時發生改變,並且工作正常。編輯:然後將該JavaScript文件在您的問題 – Glubus

回答

0

,你想要得到的顏色只需添加這計算高效,如果我明白你的要求。

Here is a live instance DEMO

// HTML

<!DOCTYPE html> 
<html> 
<head> 
    <script src="scripts/index.js"></script> 
</head> 
<body> 
    <form> 
     <select id='dropdown'> 
      <option selected disabled>Select</option> 
      <option value="blue">Blue</option> 
      <option value="green">Green</option> 
      <option value="white">White</option> 
      <option value="black">Black</option> 
     </select> 
    </form> 
    <span id="colorMe">Change font-size-adjust</span> 
</body> 
</html> 

// JS

document.addEventListener("DOMContentLoaded", init); 

function init(){ 
    document.getElementById('dropdown').addEventListener('change', change.dropdown); 
} 
var change = { 
    "dropdown": function(e){ 
     document.getElementById('colorMe').style.color = e.target.value; 
    } 
}; 
+0

你可以試試我的示例代碼來改變結果的顏色嗎? –

0

這裏最:

<head> 

     <meta name="keywords" content="JavaScript, UserInput" /> 
     <title>JavaScript accept user input demo</title> 
     <script type="text/javascript"> 
      function displayOutput() { 
       var input = document.getElementById("userInput").value; 
       if (input.length === 0) { 
        alert("Please enter a valid input"); 
        return; 
       } 
       document.getElementById("result").innerHTML = "You have entered " + input; 
      } 
     </script> 
    </head> 
    <body> 
     <h1 id="result">JavaScript Example</h1> 
     <input type="text" id="userInput" /> 
     <input type="submit" value="Submit" onclick="displayOutput()" /> 
    </body> 

相關問題