如何根据值来更改变量值？

时间：2017-05-27 21:30:33

标签： javascript html

我开始学习一些基本的JavaScript东西，它真的很有趣而且很棒:)

但我有一个问题。 如何根据值来更改变量值？
听起来令人困惑，我希望它不是。

// added function cVal because it's the one thats gonna change
// the variable numbers in the 'error' variable.

function cVal(val) {
    error = val; 
}

// Main variables
var error = 0;
var span_open = "<span class='error-output'>";
var span_close = "</span>";
var span_open_r = "<span class='error-output warning'>";

// Error message variables
var err1 = "Unauthorized access to directory.";
var err2 = "Malformed server configuration.";
var err3 = "Unauthorized access to file.";
var err4 = "Malformed server database configuration.";
var err5 = "Unknown file type .xyz";
var err6 = "Unknown file type .xy";
var err7 = "Unknown file type .x";
var err8 = "Unknown file type .ztrs";
var err10 = "Cannot connect to MySQL database.";
var err11 = "Error connecting to MySQL database.";
var err12 = "Connection timeout on 'Connecting to MySQL Database'";

// File type variables

if (error == 0) {
    document.write(span_open, "No error detected.", span_close);
} else if (error == 1) {
    document.write(span_open, "Error: ", err1, span_close);
} else if (error == 2) {
    document.write(span_open, "Error: ", err2, span_close);
} else if (error == 3) {
    document.write(span_open, "Error: ", err3, span_close);
} else if (error == 4) {
    document.write(span_open, "Error: ", err4, span_close);
} else if (error == 5) {
    document.write(span_open, "Error: ", err5, span_close);
} else if (error == 6) {
    document.write(span_open, "Error: ", err6, span_close);
} else if (error == 7) {
    document.write(span_open, "Error: ", err7, span_close);
} else if (error == 8) {
    document.write(span_open, "Error: ", err8, span_close);
} else if (error == 9) {
    document.write(span_open, "Error: ", err9, span_close);
} else if (error == 10) {
    document.write(span_open, "Error: ", err10, span_close);
} else if (error == 11) {
    document.write(span_open, "Error: ", err11, span_close);
} else if (error == 12) {
    document.write(span_open, "Error: ", err12, span_close);
} else {
    document.write(span_open_r, "Error code ", error, " does not exist.", span_close);
}
span.error-output {
    background-color:#44d52b;
    color:#ffffff;
    font-family:Verdana;
    font-size:12px;
    padding:18px;
    box-sizing:padding-box;
    top:0px;
    left:0px;
    right:0px;
    margin:15px;
    border-radius:4px;
    box-shadow:7px 7px 15px #d7d7d7;
    opacity:0.5;
    transition:all .4s ease;
    position:absolute;
}

span.error-output:hover {
    opacity:1.0;
    box-shadow:9px 9px 20px #d7d7d7;
}

span.warning {
    background-color:#d20000;
}

.cVal_container {
    background-color:#e1e2e3;
    color:#000000;
    font-family:Verdana;
    font-size:12px;
    padding:18px;
    box-sizing:padding-box;
    top:64px;
    left:0px;
    right:0px;
    margin:15px;
    border-radius:4px;
    box-shadow:7px 7px 15px #d7d7d7;
    opacity:0.5;
    transition:all .4s ease;
    position:absolute;
}

.cVal_container:hover {
    opacity:1.0;
    box-shadow:9px 9px 20px #d7d7d7;
}

button {
    background-color:#aeb0b3;
    margin-top:4px;
    color:#262728;
    width:100%;
    font-family:Verdana;
    font-size:16px;
    border:0px;
    padding:4px;
    box-shadow:7px 7px 15px #d7d7d7;
    border-radius:4px;
    opacity:0.5;
    transition:all .4s ease;
}

button:hover {
    opacity:1.0;
    box-shadow:9px 9px 20px #d7d7d7;
}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <link rel="Stylesheet" type="text/css" href="style.css">
        <script src="main.js"></script>
    </head>
<body>
<div class="cVal_container">
    <button onclick="cVal(0)" type="button">Error Code 0 (Default)</button>
    <button onclick="cVal(1)" type="button">Error Code 1</button>
    <button onclick="cVal(2)" type="button">Error Code 2</button>
    <button onclick="cVal(3)" type="button">Error Code 3</button>
    <button onclick="cVal(4)" type="button">Error Code 4</button>
    <button onclick="cVal(5)" type="button">Error Code 5</button>
    <button onclick="cVal(6)" type="button">Error Code 6</button>
    <button onclick="cVal(7)" type="button">Error Code 7</button>
    <button onclick="cVal(8)" type="button">Error Code 8</button>
    <button onclick="cVal(9)" type="button">Error Code 9</button>
    <button onclick="cVal(10)" type="button">Error Code 10</button>
    <button onclick="cVal(11)" type="button">Error Code 11</button>
    <button onclick="cVal(12)" type="button">Error Code 12</button>
    <button onclick="cVal(13)" type="button">Error Code 13</button>
    <button onclick="cVal(14)" type="button">Error Code 14</button>
    <button onclick="cVal(15)" type="button">Error Code 15</button>
    <button onclick="cVal(16)" type="button">Error Code 16</button>
</div>
</body>
</html>



我希望你们中的一些人能够理解我想在这里做什么 所以进一步解释...

如果将onclick="cVal(2)"分配给BUTTON而不是将变量error更改为值2，则但这不起作用。

< br />那么我在这里做错了什么？
请包含仅限javascript的代码，jQuery和其他人现在不适合我。


提前致谢：）

2 个答案:

答案 0 :(得分：1)

欢迎来到JS，希望这将是一段美好的旅程：）

除了清晰的代码之外，更改“错误”值实际上也适用于您的代码。但是，如果您希望在每次单击后获得不同的错误，则不会发生这种情况，因为默认情况下JS在页面加载期间（或之后）运行一次。所以，你需要做的是将函数内部的一部分包装在每次单击后调用（并使用除document.write之外的其他内容）。 

   <?
function change_meta_tags($title,$description,$keywords){
        // This function made by Jamil Hammash
    $output = ob_get_contents();
    if ( ob_get_length() > 0) { ob_end_clean(); }
    $patterns = array("/<title>(.*?)<\/title>/","<meta name='description' content='(.*)'>","<meta name='keywords' content='(.*)'>");
    $replacements = array("<title>$title</title>","meta name='description' content='$description'","meta name='keywords' content='$keywords'");

    $output = preg_replace($patterns, $replacements,$output);  
    echo $output;
}
?>

// added function cVal because it's the one thats gonna change
// the variable numbers in the 'error' variable.

function cVal(val) {
    error = val; 
    updateError()
}

// Main variables
var error = 0;
var span_open = "<span class='error-output'>";
var span_close = "</span>";
var span_open_r = "<span class='error-output warning'>";

// Error message variables
var err1 = "Unauthorized access to directory.";
var err2 = "Malformed server configuration.";
var err3 = "Unauthorized access to file.";
var err4 = "Malformed server database configuration.";
var err5 = "Unknown file type .xyz";
var err6 = "Unknown file type .xy";
var err7 = "Unknown file type .x";
var err8 = "Unknown file type .ztrs";
var err10 = "Cannot connect to MySQL database.";
var err11 = "Error connecting to MySQL database.";
var err12 = "Connection timeout on 'Connecting to MySQL Database'";

var ec = document.getElementById('error_container');
// File type variables
function updateError(){
if (error == 0) {
    ec.innerHTML = span_open+ "No error detected."+ span_close
} else if (error == 1) {
    ec.innerHTML = span_open+ "Error: "+ err1, span_close
} else if (error == 2) {
    ec.innerHTML = span_open+ "Error: "+ err2, span_close
} else if (error == 3) {
   ec.innerHTML = span_open+ "Error: "+ err3, span_close
} else if (error == 4) {
   ec.innerHTML = span_open+ "Error: "+ err4, span_close
} else if (error == 5) {
   ec.innerHTML = span_open+ "Error: "+ err5, span_close
} else if (error == 6) {
   ec.innerHTML = span_open+ "Error: "+ err6, span_close
} else if (error == 7) {
   ec.innerHTML = span_open+ "Error: "+ err7, span_close
} else if (error == 8) {
   ec.innerHTML = span_open+ "Error: "+ err8, span_close
} else if (error == 9) {
   ec.innerHTML = span_open+ "Error: "+ err9, span_close
} else if (error == 10) {
   ec.innerHTML = span_open+ "Error: "+ err10, span_close
} else if (error == 11) {
  ec.innerHTML = span_open+ "Error: "+ err11, span_close
} else if (error == 12) {
   ec.innerHTML = span_open+ "Error: "+ err12, span_close
} else {
   ec.innerHTML = span_open_r +"Error code "+error+ " does not exist."+span_close
}
}
updateError()
span.error-output {
    background-color:#44d52b;
    color:#ffffff;
    font-family:Verdana;
    font-size:12px;
    padding:18px;
    box-sizing:padding-box;
    top:0px;
    left:0px;
    right:0px;
    margin:15px;
    border-radius:4px;
    box-shadow:7px 7px 15px #d7d7d7;
    opacity:0.5;
    transition:all .4s ease;
    position:absolute;
}

span.error-output:hover {
    opacity:1.0;
    box-shadow:9px 9px 20px #d7d7d7;
}

span.warning {
    background-color:#d20000;
}

.cVal_container {
    background-color:#e1e2e3;
    color:#000000;
    font-family:Verdana;
    font-size:12px;
    padding:18px;
    box-sizing:padding-box;
    top:64px;
    left:0px;
    right:0px;
    margin:15px;
    border-radius:4px;
    box-shadow:7px 7px 15px #d7d7d7;
    opacity:0.5;
    transition:all .4s ease;
    position:absolute;
}

.cVal_container:hover {
    opacity:1.0;
    box-shadow:9px 9px 20px #d7d7d7;
}

button {
    background-color:#aeb0b3;
    margin-top:4px;
    color:#262728;
    width:100%;
    font-family:Verdana;
    font-size:16px;
    border:0px;
    padding:4px;
    box-shadow:7px 7px 15px #d7d7d7;
    border-radius:4px;
    opacity:0.5;
    transition:all .4s ease;
}

button:hover {
    opacity:1.0;
    box-shadow:9px 9px 20px #d7d7d7;
}

答案 1 :(得分：0)

稍微修改了你的代码。 可以通过调用displayError.lastError来访问上一个已知的errorCode 要更新错误消息，请致电displayError(1) // see the errors object for more detail

编辑：在.js

中添加了评论 

/**
 * Error object
 * @type {Object}
 */
var errors = {
  1: "Unauthorized access to directory.",
  2: "Malformed server configuration.",
  3: "Unauthorized access to file.",
  4: "Malformed server database configuration.",
  5: "Unknown file type .xyz",
  6: "Unknown file type .xy",
  7: "Unknown file type .x",
  8: "Unknown file type .ztrs",
  10: "Cannot connect to MySQL database.",
  11: "Error connecting to MySQL database.",
  12: "Connection timeout on 'Connecting to MySQL Database'",
};

/**
 * Display error in DIV with ID 'error-container', based on error code
 * @see errors Defined error codes
 * @param {number|string} errorCode
 */
function displayError(errorCode) {
  var errorContainer = document.getElementById('error-container');
  if (!errorContainer) {
    throw new Error('Unable to display error. Element with id "error-container" does not exist in the DOM.');
  }
  // Reset the class name for the error container
  errorContainer.className = 'error-output';
  // Store the last known error code as a "static property"
  displayError.lastError = errorCode;
  // Check if errorCode is a property in the errors object
  // Also check that we dont try to access inherited props
  if (errorCode in errors && errors.hasOwnProperty(errorCode)) {
    // Set the content of the error container
    errorContainer.innerHTML = 'Error: ' + errors[errorCode];
  } else {
    // Set the content of the error container
    errorContainer.innerHTML = "Error code " + errorCode + " does not exist.";
    // Append the warning class name
    errorContainer.className += ' warning';
  }
}
// Set an initial value of lastError
displayError.lastError = 0;
span.error-output {
  background-color: #44d52b;
  color: #ffffff;
  font-family: Verdana;
  font-size: 12px;
  padding: 18px;
  box-sizing: padding-box;
  top: 0px;
  left: 0px;
  right: 0px;
  margin: 15px;
  border-radius: 4px;
  box-shadow: 7px 7px 15px #d7d7d7;
  opacity: 0.5;
  transition: all .4s ease;
  position: absolute;
}

span.error-output:hover {
  opacity: 1.0;
  box-shadow: 9px 9px 20px #d7d7d7;
}

span.warning {
  background-color: #d20000;
}

.cVal_container {
  background-color: #e1e2e3;
  color: #000000;
  font-family: Verdana;
  font-size: 12px;
  padding: 18px;
  box-sizing: padding-box;
  top: 64px;
  left: 0px;
  right: 0px;
  margin: 15px;
  border-radius: 4px;
  box-shadow: 7px 7px 15px #d7d7d7;
  opacity: 0.5;
  transition: all .4s ease;
  position: absolute;
}

.cVal_container:hover {
  opacity: 1.0;
  box-shadow: 9px 9px 20px #d7d7d7;
}

button {
  background-color: #aeb0b3;
  margin-top: 4px;
  color: #262728;
  width: 100%;
  font-family: Verdana;
  font-size: 16px;
  border: 0px;
  padding: 4px;
  box-shadow: 7px 7px 15px #d7d7d7;
  border-radius: 4px;
  opacity: 0.5;
  transition: all .4s ease;
}

button:hover {
  opacity: 1.0;
  box-shadow: 9px 9px 20px #d7d7d7;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">
  <link rel="Stylesheet" type="text/css" href="style.css">
  <script src="main.js"></script>
</head>

<body>
  <span id="error-container" class="error-output">Press a button to test</span>
  <div class="cVal_container">
    <button onclick="displayError(0)" type="button">Error Code 0 (Default)</button>
    <button onclick="displayError(1)" type="button">Error Code 1</button>
    <button onclick="displayError(2)" type="button">Error Code 2</button>
    <button onclick="displayError(3)" type="button">Error Code 3</button>
    <button onclick="displayError(4)" type="button">Error Code 4</button>
    <button onclick="displayError(5)" type="button">Error Code 5</button>
    <button onclick="displayError(6)" type="button">Error Code 6</button>
    <button onclick="displayError(7)" type="button">Error Code 7</button>
    <button onclick="displayError(8)" type="button">Error Code 8</button>
    <button onclick="displayError(9)" type="button">Error Code 9</button>
    <button onclick="displayError(10)" type="button">Error Code 10</button>
    <button onclick="displayError(11)" type="button">Error Code 11</button>
    <button onclick="displayError(12)" type="button">Error Code 12</button>
    <button onclick="displayError(13)" type="button">Error Code 13</button>
    <button onclick="displayError(14)" type="button">Error Code 14</button>
    <button onclick="displayError(15)" type="button">Error Code 15</button>
    <button onclick="displayError(16)" type="button">Error Code 16</button>
  </div>
</body>

</html>

相关问题
最新问题