没有JavaScript输出的可点击按钮?

时间:2014-12-02 15:29:41

标签: javascript jquery html

我需要一个可点击的按钮,但onClick它会激活一个JavaScript函数,但我不希望它成为<button>元素,因为它会用丑陋的替换它看矩形,我只想让div元素可以点击它,它会让它给出一个响应。如果这是一个测验,并且有一个问题要定义一个单词,我希望它能够单击生成的答案中的一个,并根据点击的内容,它将显示正确的复选标记或不正确的X. / p>

问题

我需要为3x3表提供可点击的<td>元素,onClick输出JavaScript命令/函数,而不必为每个<button>使用<td>元件。

实施例

生成的单词'FRUIT'已经到位。 9个可能的答案是'青豆','玉米','苹果','土豆','黄瓜','番茄','胡萝卜','西兰花'和'白菜'。所有<td>元素都可以点击[我记得的工作] <td><a href="determineAnswer()">Carrot</a></td>,如果单击“Apple”,它将输出该函数并检查它是否正确。如果是,它会将复选标记的display: hidden更改为可见,直到单击该按钮。否则,它将对X执行相同的操作。

CODE

JS:根据单词函数

更改答案
function grabWord()  {
  var word = document.getElementById("outputNumber");
  var answer1 = document.getElementById("output1");
  var answer2 = document.getElementById("output2");
  var answer3 = document.getElementById("output3");
  var answer4 = document.getElementById("output4");
  var answer5 = document.getElementById("output5");
  var answer6 = document.getElementById("output6");
  var answer7 = document.getElementById("output7");
  var answer8 = document.getElementById("output8");
  var answer9 = document.getElementById("output9");
  if(word.innerHTML == "Word 1")  {
    answer1.innerHTML = "A4W1";
    answer2.innerHTML = "A4W2";
    answer3.innerHTML = "A4W3";
    answer4.innerHTML = "A4W4";
    answer5.innerHTML = "A4W5";
    answer6.innerHTML = "A4W6";
    answer7.innerHTML = "A4W7";
    answer8.innerHTML = "A4W8";
    answer9.innerHTML = "A4W9";
  }
  else if(word.innerHTML == "Word 2")  {
    answer1.innerHTML = "A4W2";
    answer2.innerHTML = "A4W2";
    answer3.innerHTML = "A4W2";
    answer4.innerHTML = "A4W2";
    answer5.innerHTML = "A4W2";
    answer6.innerHTML = "A4W2";
    answer7.innerHTML = "A4W2";
    answer8.innerHTML = "A4W2";
    answer9.innerHTML = "A4W2";    
  }
  else if(word.innerHTML == "Word 3")  {
    answer1.innerHTML = "A4W3";
    answer2.innerHTML = "A4W3";
    answer3.innerHTML = "A4W3";
    answer4.innerHTML = "A4W3";
    answer5.innerHTML = "A4W3";
    answer6.innerHTML = "A4W3";
    answer7.innerHTML = "A4W3";
    answer8.innerHTML = "A4W3";
    answer9.innerHTML = "A4W3";
  }
  else if(word.innerHTML == "Word 4")  {
    answer1.innerHTML = "A4W4";
    answer2.innerHTML = "A4W4";
    answer3.innerHTML = "A4W4";
    answer4.innerHTML = "A4W4";
    answer5.innerHTML = "A4W4";
    answer6.innerHTML = "A4W4";
    answer7.innerHTML = "A4W4";
    answer8.innerHTML = "A4W4";
    answer9.innerHTML = "A4W4";
  }
  else if(word.innerHTML == "Word 5")  {
    answer1.innerHTML = "A4W5";
    answer2.innerHTML = "A4W5";
    answer3.innerHTML = "A4W5";
    answer4.innerHTML = "A4W5";
    answer5.innerHTML = "A4W5";
    answer6.innerHTML = "A4W5";
    answer7.innerHTML = "A4W5";
    answer8.innerHTML = "A4W5";
    answer9.innerHTML = "A4W5";
  }
  else if(word.innerHTML == "Word 6")  {
    answer1.innerHTML = "A4W6";
    answer2.innerHTML = "A4W6";
    answer3.innerHTML = "A4W6";
    answer4.innerHTML = "A4W6";
    answer5.innerHTML = "A4W6";
    answer6.innerHTML = "A4W6";
    answer7.innerHTML = "A4W6";
    answer8.innerHTML = "A4W6";
    answer9.innerHTML = "A4W6";
  }
  else if(word.innerHTML == "Word 7")  {
    answer1.innerHTML = "A4W7";
    answer2.innerHTML = "A4W7";
    answer3.innerHTML = "A4W7";
    answer4.innerHTML = "A4W7";
    answer5.innerHTML = "A4W7";
    answer6.innerHTML = "A4W7";
    answer7.innerHTML = "A4W7";
    answer8.innerHTML = "A4W7";
    answer9.innerHTML = "A4W7";
  }
  else if(word.innerHTML == "Word 8")  {
    answer1.innerHTML = "A4W8";
    answer2.innerHTML = "A4W8";
    answer3.innerHTML = "A4W8";
    answer4.innerHTML = "A4W8";
    answer5.innerHTML = "A4W8";
    answer6.innerHTML = "A4W8";
    answer7.innerHTML = "A4W8";
    answer8.innerHTML = "A4W8";
    answer9.innerHTML = "A4W8";
  }
  else if(word.innerHTML == "Word 9")  {
    answer1.innerHTML = "A4W9";
    answer2.innerHTML = "A4W9";
    answer3.innerHTML = "A4W9";
    answer4.innerHTML = "A4W9";
    answer5.innerHTML = "A4W9";
    answer6.innerHTML = "A4W9";
    answer7.innerHTML = "A4W9";
    answer8.innerHTML = "A4W9";
    answer9.innerHTML = "A4W9";
  }
  else  {
    answer1.innerHTML = "Error";
    answer2.innerHTML = "Error";
    answer3.innerHTML = "Error";
    answer4.innerHTML = "Error";
    answer5.innerHTML = "Error";
    answer6.innerHTML = "Error";
    answer7.innerHTML = "Error";
    answer8.innerHTML = "Error";
    answer9.innerHTML = "Error";
  }
}

JS:创建Word本身

function changeRandom()  {
  var x = document.getElementById('outputNumber').innerHTML
  if(x == 1)  {
    document.getElementById("outputNumber").innerHTML = "Word 1";
  } else if(x == 2)  {
    document.getElementById("outputNumber").innerHTML = "Word 2";
  } else if(x == 3)  {
    document.getElementById("outputNumber").innerHTML = "Word 3";
  } else if(x == 4)  {
    document.getElementById("outputNumber").innerHTML = "Word 4" 
  } else if(x == 5) {
    document.getElementById("outputNumber").innerHTML = "Word 5"
  }
  else if(x == 6) {
    document.getElementById("outputNumber").innerHTML = "Word 6"
  } 
  else if(x == 7) {
    document.getElementById("outputNumber").innerHTML = "Word 7"
  }
  else if(x == 8) {
    document.getElementById("outputNumber").innerHTML = "Word 8"
  }
  else if(x == 9) {
    document.getElementById("outputNumber").innerHTML = "Word 9"
  }
  else if(x == 10) {
    document.getElementById("outputNumber").innerHTML = "Word 10"
  }
  else  {
    document.getElementById("output1").innerHTML = "Error :c"
  }
}

HTML:选择性元素

  <table>
    <p id="outputNumber" class="outputNumber">Your word will go here; Click the Randomize Button!</p>
    <tr>
      <td id="output1"></td>
      <td id="output2"></td>
      <td id="output3"></td>
    </tr>
    <tr>
      <td id="output4"></td>
      <td id="output5"></td>
      <td id="output6"></td>
    </tr>
    <tr>
      <td id="output7"></td>
      <td id="output8"></td>
      <td id="output9"></td>
    </tr>
  </table>

可行的CODEPEN

CodePen

2 个答案:

答案 0 :(得分:1)

将tabindex添加到您想要点击的div的html中,然后添加onclick。

&#13;
&#13;
<table><tr>
<td id="clickable" tabindex="1" onclick="alert('clicked')">Click me</td>
</tr></table>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

因此,对于我的回答,我已经为您完成了一些主要的代码清理,并提供了使表格单元格可点击所需的其他事件处理程序(在JavaScript代码段的末尾)。我希望您使用此代码作为学习工具来提高您自己的JavaScript能力,而不仅仅是将其用于这个项目。

&#13;
&#13;
// This is an unchanged function that was in the original CodePen provided, that I'm assuming was "borrowed" from elsewhere since you're not familiar with loops.
        function getRandom() {
            var nums = [1, 2, 3, 4, 5, 6, 7, 8, 9];
            var gen_nums = [];
            function in_array(array, el) {
                for (var i = 0 ; i < array.length; i++)
                    if (array[i] == el) return true;
                return false;
            }
            function get_rand(array) {
                var rand = array[Math.floor(Math.random() * array.length)];
                if (!in_array(gen_nums, rand)) {
                    gen_nums.push(rand);
                    return rand;
                }
                return get_rand(array);
            }
            for (var i = 0; i < 9; i++) {
                return (get_rand(nums));
            }
        }

// EDIT:  This acts like a "Dictionary" for your words.  Each array must contain exactly 9 words
    var words = [
        { word: "Fruits A-B", array: ["Apple", "Apricot", "Avacado", "Banana", "Breadfruit", "Bilberry", "Blackberry", "Blackcurrant", "Blueberry"] },
        { word: "Fruits B-C", array: ["Boysenberry", "Cantaloupe", "Currant", "Cherry", "Cherimoya", "Cloudberry", "Coconut", "Cranberry", "Cucumber"] },
        { word: "Fruits D-G", array: ["Damson", "Date", "Dragonfruit", "Durian", "Eggplant", "Elderberry", "Feijoa", "Fig", "Goji berry"] },
        { word: "Fruits G-K", array: ["Gooseberry", "Grape", "Grapefruit", "Guava", "Huckleberry", "Honeydew", "Jackfruit", "Jambul", "Kiwi fruit"] },
        { word: "Fruits K-M", array: ["Kumquat", "Lemon", "Lime", "Loquat", "Lychee", "Mango", "Marion berry", "Melon", "Miracle fruit"] },
        { word: "Fruits M-P", array: ["Mulberry", "Nectarine", "Nut", "Olive", "Orange", "Papaya", "Passionfruit", "Peach", "Pepper"] },
        { word: "Fruits P-Q", array: ["Pear", "Persimmon", "Physalis", "Plum", "Pineapple", "Pomegranate", "Pomelo", "Purple Mangosteen", "Quince"] },
        { word: "Fruits R-T", array: ["Raspberry", "Rambutan", "Salal berry", "Salmon berry", "Satsuma", "Star fruit", "Strawberry", "Tomarillo", "Tomato"] },
        { word: "Fruits U-Z", array: ["Ugli fruit", "Watermelon", "Bell pepper", "Chili pepper", "Clementine", "Mandarine", "Tangerine", "Blood Orange", "Rock Melon"] }
    ];

// EDIT: This is the new condensed grabWord() function
    function grabWord() {
        var word = document.getElementById("outputNumber").innerHTML;
        var wordIndex;
        for (var i = 0; i < words.length; i++) {
            if (words[i].word === word) {
                wordIndex = i;
                break;
            }
        }
        for (var i = 1; i <= 9; i++) {
            document.getElementById("output" + i).innerHTML = words[wordIndex].array[i-1];
        }
    }

// EDIT: This is the fixed changeRandom() function
    function changeRandom() {
        document.getElementById("outputNumber").innerHTML = words[(getRandom() - 1)].word;
        grabWord();
    }

// Modified event handler that was in the original CodePen
        document.getElementById("myBtn").addEventListener("click", function () {
            changeRandom();
        })
        
// New event handler for the clicking of the cells in the table.
        var cells = document.getElementsByTagName("td");
        for (var i = 0; i < cells.length; i++) {
            cells[i].addEventListener("click", function () {
                alert(this.innerHTML);
            });
        }
&#13;
table, tbody, tr, td{
  border: 1px solid black;
  border-collapse: collapse;
  padding: 5px;
  }
&#13;
    <div id="header" class="animated infinite pulse">
        <h2>School Learning Kit!</h2>
    </div>
    <div id="header2">
        <h5>This kit has multiple tools for learning <i>AND</i>school, including calculators, word definitions (quiz, study guide, etc) and more! Consult the JavaScript comments etc) and more! Consult the JavaScript comments (third box) for information on how to (third box) for information on how to change each tool to fit your needs!</h5>
    </div>
    <div id="randomizer">
        <div id="wordOutput">
            <div id="button">
                <button id="myBtn">Randomize!</button><br />
                <p>
                    Click this button to generate a random word!
                </p>
            </div>
        </div>
        <div id="answers" class="answers">
            <p id="outputNumber" class="outputNumber">Your word will go here; Click the Randomize Button!</p>
            <table>
                <tbody>
                    <tr>
                        <td id="output1" tabindex="1"></td>
                        <td id="output2" tabindex="1"></td>
                        <td id="output3" tabindex="1"></td>
                    </tr>
                    <tr>
                        <td id="output4" tabindex="1"></td>
                        <td id="output5" tabindex="1"></td>
                        <td id="output6" tabindex="1"></td>
                    </tr>
                    <tr>
                        <td id="output7" tabindex="1"></td>
                        <td id="output8" tabindex="1"></td>
                        <td id="output9" tabindex="1"></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
&#13;
&#13;
&#13;