按钮点击更改颜色

时间：2018-10-29 04:19:19

标签： javascript html buttonclick

这里有些卡住了，我有几个按钮需要单独执行。例如，某人单击绿色将段落文本的颜色更改为绿色，我完成了第一个，但似乎无法与他人合作，正确的方法是什么？ 

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

10 个答案:

答案 0 :(得分：1)

您的myFunction()不知道被调用后需要做什么。

尝试此入门级代码，只需声明一些函数即可更改文本颜色： 

function blue() {
  var p = document.getElementById("paragraph"); // get the paragraph
  p.style.color= 'blue'
}

function green() {
  var p = document.getElementById("paragraph"); // get the paragraph
  p.style.color= 'green'
}

function mono(){
  var p = document.getElementById("paragraph"); // get the paragraph
  p.style.fontFamily = "monospace"
}
<!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: 100px;
    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="green()">Green</button><!-- Changes text to Green -->
<button type="button" onclick="blue()">Blue</button><!-- Changes text to Blue -->
<button type="button" onclick="mono()">Mono</button><!-- Changes text to monospace-->


</p>
</div>
</body>
</html>

答案 1 :(得分：1)

这里是所有按钮的完整版本，您可以使用开关盒，以便可以对多个按钮使用相同的代码。我用过switch case 

function myFunction(actionType,actionValue,currentButton) {
  var increaseDecreaseFactor = 5;
   switch (actionType) {
            case 'color':
                document.getElementById("paragraph").style.color = actionValue;
                 currentButton.style.color = actionValue;
                break; 
                case 'increaseFont':
               
                 txt = document.getElementById("paragraph");
                 style = window.getComputedStyle(txt, null).getPropertyValue('font-size');
                 currentSize = parseFloat(style);
                 txt.style.fontSize = (currentSize + increaseDecreaseFactor) + 'px';
                 
                break;
                 case 'decreaseFont':
               
                 txt = document.getElementById("paragraph");
                 style = window.getComputedStyle(txt, null).getPropertyValue('font-size');
                 currentSize = parseFloat(style);
                 txt.style.fontSize = (currentSize - increaseDecreaseFactor) + 'px';
                 
                break;
                case 'changeFont':
                  document.getElementById("paragraph").style.fontFamily = actionValue;
                break;
            default:
                break;
        }

 
}
#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;
  }
<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('color','green',this)" id="GreenColour">Green</button><!-- Changes text to Green -->
<button type="button" onclick="myFunction('color','blue',this)" id="Bluecolour">Blue</button><!-- Changes text to Blue -->
<button type="button" onclick="myFunction('increaseFont','size++',this)" id="SizeAdd">Size++</button> <!-- This button increases size by 1 every time its clicked -->
<button type="button"onclick="myFunction('decreaseFont','size--',this)" id="SizeMinus">Size--</button> <!-- This button decreases size by 1 every time its clicked -->
<button type="button" onclick="myFunction('changeFont','monospace',this)" id="Mono">Mono</button> <!-- Changes text to Mono -->
<button type="button" onclick="myFunction('changeFont','Sans-Serif',this)" id="Sans Serif">Sans Serif</button> <!-- Changes text to Sans Serif -->
<button type="button" onclick="myFunction('changeFont','Serif',this)" id="Serif">Serif</button> <!-- Changes text to Serif -->


</p>
</div>

答案 2 :(得分：1)

有不同的方法，

  1. 为不同的按钮id命名不同的函数名称，并根据其设置背景

  2. 调用相同的函数，但是这次在函数内部传递按钮ID的参数

    button type =“ button” onclick =“ myFunction（this.id）” id =“ GreenColour”>绿色

函数是：

        function myFunction(id) {
         if(id=="GreenColour")
          document.getElementById("paragraph").style.color="green"; // get the paragraph
            //document.getElementById("paragraph").style.color = "green";
         else if(id=="BlueColour")
          document.getElementById("paragraph").style.color=blue; // get the paragraph
          //document.getElementById("Bluecolour").style.color = "blue";
  }

答案 3 :(得分：1)

您可以将逻辑分为不同的函数，并将值作为参数传递给它们：

const paragraph = document.getElementById("paragraph");
let fontSize = 1;
function setStyle(style, value) {
  paragraph.style[style] = value;
}

function incrementSize(value) {
  fontSize += value
  paragraph.style.fontSize = `${fontSize}em` ;
}
<!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="setStyle('color', 'green')" id="GreenColour">Green</button><!-- Changes text to Green -->
<button type="button" onclick="setStyle('color', 'blue')" id="Bluecolour">Blue</button><!-- Changes text to Blue -->
<button type="button" onclick="setStyle('font-family', 'monospace')" id="Mono">Mono</button> <!-- Changes text to Mono -->
<button type="button" onclick="setStyle('font-family', 'sans-serif')" id="Sans Serif">Sans Serif</button> <!-- Changes text to Sans Serif -->
<button type="button" onclick="setStyle('font-family', 'serif')" id="Serif">Serif</button> <!-- Changes text to Serif -->
<button type="button" onclick="incrementSize(+0.1)" id="SizeAdd">Size++</button> <!-- This button increases size by 1 every time its clicked -->
<button type="button"onclick="incrementSize(-0.1)" id="SizeMinus">Size--</button> <!-- This button decreases size by 1 every time its clicked -->

</p>
</div>
</body>
</html>

答案 4 :(得分：1)

使用SWITCH大小写更新代码

//JS:

    function myFunction(btnColor) {
    var p = document.getElementById("paragraph"); // get the paragraph
    switch(btnColor){
    case 'green':
    document.getElementById("paragraph").style.color = "green";
    break;
     case 'blue':
    document.getElementById("paragraph").style.color = "blue";
    break;
    case 'mono':
    document.getElementById("paragraph").style.color = "mono";
    break;
    case 'sansserif':
    document.getElementById("paragraph").style.fontFamily = "Sans Serif";
    break;
    case 'serif':
    document.getElementById("paragraph").style.fontFamily = "serif";
    break;
    case 'sizeadd':
    var el = document.getElementById('paragraph');
var style = window.getComputedStyle(el, null).getPropertyValue('font-size');
var fontSize = parseFloat(style); 
el.style.fontSize = (fontSize + 1) + 'px';
    document.getElementById("paragraph").style.fontSize = "serif";
    break;
    case 'sizeminus':
    var el = document.getElementById('paragraph');
var style = window.getComputedStyle(el, null).getPropertyValue('font-size');
var fontSize = parseFloat(style); 
el.style.fontSize = (fontSize - 1) + 'px';
    break;
    }
      
    }
 
 #paragraph {
        padding: 10px;
        margin-bottom: 10px;
        background-color: silver;
        border: 1px dashed black;
        width: 90%; /* you can adjust this on Firefox if needed */
        height: 20px;
        overflow: hidden;
        margin-top: 10px;
      }
   <!doctype html>
    <html lang="en">
    <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('green')" id="GreenColour">Green</button><!-- Changes text to Green -->
    <button type="button" onclick="myFunction('blue')" id="Bluecolour">Blue</button><!-- Changes text to Blue -->
    <button type="button" onclick="myFunction('mono')" id="Mono">Mono</button> <!-- Changes text to Mono -->
    <button type="button" onclick="myFunction('sansserif')" id="Sans Serif">Sans Serif</button> <!-- Changes text to Sans Serif -->
    <button type="button" onclick="myFunction('serif')" id="Serif">Serif</button> <!-- Changes text to Serif -->
    <button type="button" onclick="myFunction('sizeadd')" id="SizeAdd">Size++</button> <!-- This button increases size by 1 every time its clicked -->
    <button type="button"onclick="myFunction('sizeminus')" id="SizeMinus">Size--</button> <!-- This button decreases size by 1 every time its clicked -->
    
    </p>
    </div>
    </body>
    </html>

答案 5 :(得分：1)

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

这是一些代码，向您展示如何更改颜色。很容易看出，您可以按照以下设计模式更改[self.tabController.tabBar.items objectAtIndex:0].badgeValue = [NSString stringWithFormat:@"%i", num]; 参数，以获得所需的结果。

if (self.tabController.tabBar.items != nil)   { }

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

答案 6 :(得分：1)

最简单的方法是使用参数myFunction(name, value)

创建函数 

var fontSize = 12;

function myFunction(name, value) {
  var p = document.getElementById("paragraph");
  if (value == 'SizeAdd') {
    fontSize += 2;
    value = fontSize + 'px';
  }
  if (value == 'SizeMinus') {
    fontSize -= 2;
    value = fontSize + 'px';
  }
  p.style[name] = value;
}
<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('color', 'green')">Green</button>
  <button type="button" onclick="myFunction('color', 'blue')">Blue</button>
  <button type="button" onclick="myFunction('fontFamily', 'Mono')">Mono</button>
  <button type="button" onclick="myFunction('fontFamily', 'Sans-Serif')">Sans Serif</button>
  <button type="button" onclick="myFunction('fontFamily', 'Serif')">Serif</button>
  <button type="button" onclick="myFunction('fontSize', 'SizeAdd')">Size++</button>
  <button type="button" onclick="myFunction('fontSize', 'SizeMinus')">Size--</button>
</p>

答案 7 :(得分：0)

首先在您的头部添加以下链接。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

您可以通过以下方式完成上述操作：

$("button").click(function() {
    var Id = $(this).attr('id');
    if(Id == 'GreenColour'){
        $("#"+Id).css('color','green');
    }elseif(Id == 'Bluecolour'){
        $("#"+Id).css('color','blue');
    }elseif(...){
        .....
    }else(...){
        .....
    }
});

，依此类推。您可以在其他情况下根据其ID执行不同的操作。

答案 8 :(得分：0)

您可以这样做

> str(SFdischg)
'data.frame':   11932 obs. of  4 variables:
 $ date: Factor w/ 11932 levels "1/01/1985","1/01/1986",..: 97 4409 8697 9677 10069 10461 10853 11245 11637 489 ...
 $ ddmm: Factor w/ 366 levels "01-Apr","01-Aug",..: 1 13 25 37 49 61 73 85 97 109 ...
 $ year: int  1984 1984 1984 1984 1984 1984 1984 1984 1984 1984 ...
 $ cfs : int  1500 1430 1500 1850 1810 1830 1850 1880 1970 1980 ...

在div中将颜色名称设置为属性，并在调用函数中读取该属性并使用它。

答案 9 :(得分：0)

因此，在您的帮助下以及其他看到这一点的人，我学到了这一点，本质上，按钮onclick名称可以在JS中用于更改文本颜色，定义按钮id，创建变量，然后使用默认JS来更改段落的颜色。

HTML：

   <!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: 100px;
    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="green()">Green</button><!-- Changes text to Green -->
<button type="button" onclick="blue()">Blue</button><!-- Changes text to Blue -->
<button type="button" onclick="mono()">Mono</button><!-- Changes text to monospace-->
<button type="button" onclick="sansserif()">Sans Serif</button><!-- Changes text to Sans Serif-->
<button type="button" onclick="serif()">Serif</button><!-- Changes text to Serif-->
</p>
</div>
</body>
</html>

JS：

function blue() {
  var p = document.getElementById("paragraph"); // get the paragraph
  p.style.color= 'blue'
}

function green() {
  var p = document.getElementById("paragraph"); // get the paragraph
  p.style.color= 'green'
}

function mono(){
  var p = document.getElementById("paragraph"); // get the paragraph
  p.style.fontFamily = 'monospace'
}

function sansserif(){
  var p = document.getElementById("paragraph"); // get the paragraph
  p.style.fontFamily = 'sans-serif'
}

function serif(){
  var p = document.getElementById("paragraph"); // get the paragraph
  p.style.fontFamily = 'serif'
}
相关问题
最新问题