如何在Javascript中分配我从用户那里得到的值

How to assign value that i get from user in Javascript?

本文关键字：那里 用户 Javascript 分配      更新时间：2023-09-26

我有一些动态改变颜色的变量：

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。你能帮我吗？

示例我想根据用户输入更改结果文本的颜色：

<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>

只需将其添加到您想要获得颜色的位置：

  // 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();

如果我理解你的要求，这里是计算效率最高的。

这是一个实时实例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;
    }
};
相关文章：