Question

我想从按钮（ SCRAMBLE ）中使用我的scramble hideText和showBoxes功能。这实际上意味着当我单击“SCRAMBLE”按钮时，应该调用3个函数。

现在的问题是，我可以单独完成它们，但不能将所有功能集成到一个按钮中。我可以知道这是如何工作的吗？：）

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello world</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js">    
</script>

</head>

<body>
<header>
<center>

<h1>Drag in order to create a sentence</h1>


<div id="cardContainer" draggable="true"></div>

<style>
.box {width:200px;height:30px;padding:30px;border:5px solid #DF2E34; background-color:     
#FA4F55;display: inline-block;}
.mover{color:red; background-color: #2BFFB6; width:auto ; font-size: 30px ; border: 20px}
#id1 {color:black; background-color: #2BFFB6; width:150px ; font-size: 40px ; border: 
1px;display: block;margin: 40px;}
#id2 {color:black; background-color: #2BFFB6; width:150px ; font-size: 40px ; border: 
1px;display: block;margin: 40px;}
#id3 {color:black; background-color: #2BFFB6; width:150px ; font-size: 40px ; border: 
1px;display: block;margin: 40px;}
#id4 {color:black; background-color: #2BFFB6; width:150px ; font-size: 40px ; border: 
1px;display: block;margin: 40px;}
#id5 {color:black; background-color: #2BFFB6; width:150px ; font-size: 40px ; border: 
1px;display: block;margin: 40px;}
#id6 {color:black; background-color: #2BFFB6; width:150px ; font-size: 40px ; border: 
1px;display: block;margin: 40px;}



p{
font-weight: bold;
font-size: 35px;
color: #0B0707;
background-color:red;
width:700px ;
font-size: 40px ;
border: 1px;

    }
</style>


<?php
$conn = mysql_connect("localhost", "root", "password");


if (!mysql_select_db("login")) {
echo "Unable to select go database " . mysql_error();
exit;
}

$sql = "SELECT full
    FROM   sen
    WHERE  id = 2";

$result = mysql_query($sql);


while ($row = mysql_fetch_assoc($result)) {
$output =  $row["full"];

}

mysql_free_result($result);

?>


<p id="HideMe"><?php echo $output ?></p>
<button onclick='o();'>SCRAMBLE</button>

<p><input type="button" value="Click Me" id="ShowMe1a" /></p>
        <p id="ShowMe1b">I am no longer hidden</p>

<script>
var js_var = "<?php echo $output ?>";
var div_id = ['id1','id2','id3','id4','id5','id6','id7','id8','id9','id10'];
var box_id = ['box1','box2','box3','box4','box5','box6','box7','box8','box9','box10'];

var balls90= js_var.split("#");



function getNumbers() {
var player1 = new Array();
balls90.sort(function() {
    return Math.random() - .25;
    document.getElementById("shuffle").onclick = function(){displayDate()};
});

 for (var i = 0; i < balls90.length; i++) {
     document.writeln('<div id="+box_id[i]+" class="box" droppable="true" ondrop="drop(event)"        
ondragover="allowDrop(event)"></div>');
 }


for (var i = 0; i < balls90.length; i++) {
    player1.push(balls90[i]);

  }

}

 getNumbers();



function dragWord(dragEvent){
dragEvent.dataTransfer.setData("text/html",    
dragEvent.target.textContent+"|"+dragEvent.target.parentNode.id);
}


function dropWord(dropEvent){ 
var dropData = dropEvent.dataTransfer.getData("text/html"); 
var dropItems = dropData.split("|"); 
var prevElem = document.getElementById(dropItems[1]); 
prevElem.getElementsByTagName("div")[0].textContent = dropEvent.target.textContent; 
dropEvent.target.textContent = dropItems[0]; 
dropEvent.preventDefault(); 
} 

function allowDrop(ev) {
ev.preventDefault();
}   


function drag(ev) {
    ev.dataTransfer.setData("Text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
     //var data_content=document.getElementById(data).innerText;
    //alert('The selected text is: ' + data_content + '.');
}

    //hide

            $(document).ready(function(){
                $("#HideMe").click(function() {
                    $("#HideMe").hide();
                });
            }); 

            //show

            $(document).ready(function(){
                $("#ShowMe1b").hide();

                $("#ShowMe1a").click(function() {
                    $("#ShowMe1b").show();
                });
            });



</script>


</body>
</html>

Answer 1

有几种方法可以通过按下按钮调用多个功能。您可以通过点击进行内联，如下所示：

<button onclick='scramble();hide();show();'></button>

或者你可以将它们全部包装在一个新函数中（在javascript或php中），然后调用它：

function scrambleRun() {
    scramble();
    hide();
    show();
}

还有很多其他方法。

Answer 2

您的按钮有onclick="o()"，但您没有function o()，因此您要么没有发布正确的代码，要么出现javascript错误。在您的控制台中验证这一点。

你可能想要这样的东西

$('#shuffle').on('click', function() {
    o(); // whatever this is?!?!
    $("#HideMe").hide();
    $("#ShowMe1b").show();
});

Answer 3

您可以通过多种方式调用多种功能。

第一种方式是使用<input id="btn" type="button" value="click" onclick="pay(); cls();"/>

第二种方法是将两个函数定义为其他函数并通过onclick传递它。

function myFunction(){
pay();
cls();
}

<input id="btn" type="button" value="click" onclick="myFunction();"/>

在按钮中放置多个功能

3 个答案: