时间戳

首页 > 解决方案 > 按钮单击更改颜色

javascript - 按钮单击更改颜色

问题描述

有点卡在这里，我有几个按钮，我想做单独的动作。例如，有人单击绿色它会将段落文本颜色更改为绿色，我完成了第一个但我似乎无法使用其他人，正确的方法是什么？

//JS:

    function myFunction() {
    
      var p = document.getElementById("paragraph"); // get the paragraph
        document.getElementById("paragraph").style.color = "green";
    
      var p = document.getElementById("paragraph"); // get the paragraph
        document.getElementById("Bluecolour").style.color = "blue";
    }
    <!doctype html>
    <html lang="en">
    <head>
      <title> Change Paratext </title>
      <meta charset="utf-8">
      <script src="task2.js"></script>
      <style>
      #paragraph {
        padding: 10px;
        margin-bottom: 10px;
        background-color: silver;
        border: 1px dashed black;
        width: 90%; /* you can adjust this on Firefox if needed */
        height: 200px;
        overflow: hidden;
        margin-top: 10px;
      }
      </style>
    </head>
    <body>
    <h1> Ali Rizwan </h1>
    <p id="paragraph"> Box changes text based on what colour is clicked <br>
    <!-- add your buttons here. All buttons should be in one paragraph -->
    </p>
    
    <p id="buttons">
    <button type="button" onclick="myFunction()" id="GreenColour">Green</button><!-- Changes text to Green -->
    <button type="button" onclick="myFunction()" id="Bluecolour">Blue</button><!-- Changes text to Blue -->
    <button type="button" onclick="myFunction()" id="Mono">Mono</button> <!-- Changes text to Mono -->
    <button type="button" onclick="myFunction()" id="Sans Serif">Sans Serif</button> <!-- Changes text to Sans Serif -->
    <button type="button" onclick="myFunction()" id="Serif">Serif</button> <!-- Changes text to Serif -->
    <button type="button" onclick="myFunction()" id="SizeAdd">Size++</button> <!-- This button increases size by 1 every time its clicked -->
    <button type="button"onclick="myFunction()" id="SizeMinus">Size--</button> <!-- This button decreases size by 1 every time its clicked -->
    
    </p>
    </div>
    </body>
    </html>

标签： javascripthtmlbuttonclick

解决方案

首先，出于缓存原因，最好使用外部 CSS 和 JavaScript。只要确保在每次上线时更新代码时都更改 CSS 和 JavaScript 文件名。此外，最好将 HTML、CSS 和 JavaScript 分开。

这是一些代码，向您展示如何更改颜色。应该很容易看出，您可以paraColor按照下面的设计模式更改参数，以获得您想要的结果。

//<![CDATA[
/* js/external.js */
var doc, bod, htm, M, I, S, Q, paraColor; // for use on other loads
addEventListener('load', function(){
doc = document; bod = doc.body; htm = doc.documentElement;
M = function(tag){
  return doc.createElement(tag);
}
I = function(id){
  return doc.getElementById(id);
}
S = function(selector, within){
  var w = within || doc;
  return w.querySelector(selector);
}
Q = function(selector, within){
  var w = within || doc;
  return w.querySelectorAll(selector);
}
var para = I('paragraph'), pS = para.style;
paraColor = function(color){
  pS.color = color;
}
I('greenColor').addEventListener('click', function(){
  paraColor('green');
});
I('blueColor').addEventListener('click', function(){
  paraColor('blue');
});
}); // load end
//]]>
/* css/external.css */
html,body{
  padding:0; margin:0;
}
.main{
  width:980px; margin:0 auto;
}
#paragraph{
  height:100px; background-color:silver; padding:10px; border:1px dashed black;
  margin:10px 0; overflow:hidden;
}
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta http-equiv='content-type' content='text/html;charset=utf-8' />
    <meta name='viewport' content='width=device-width, height=device-height, initial-scale:1, user-scalable=no' />
    <title>Paratext</title>
    <link type='text/css' rel='stylesheet' href='css/external.css' />
    <script src='js/external.js'></script>
  </head>
<body>
  <div class='main'>
    <h1>Ali Rizwan</h1>
    <p id='paragraph'>Box changes text based on what color is clicked</p>
    <p id='buttons'>
      <input type='button' id='greenColor' value='Green' />
      <input type='button' id='blueColor' value='Blue' />
    </p>
  </div>
</body>
</html>

推荐阅读