/    Sign up×
Community /Pin to ProfileBookmark

Javascript onclick problem

Copy linkTweet thisAlerts:
Feb 08.2015

Hello,

[I]<!doctype html>
<html>
<head>
<title>My page</title>
<script type=”text/javascript” src=”script.js”>
</script>
</head>
<body>
<div id=”text_div”>
<h2>Table 1</h2>
<table id=”gametable” width=”400″ border=”1″ cellspacing=”1″ cellpadding=”5″>
<button type=”button” onclick=”table_2()”>table 2</button>
<script type=”text/javascript”>
table_1();
</script>
</table>
</div>
</body>
</html>[/I]

I am a beginner with Javascript, but it is very interesting to “play” with it. I have put a code of my page here and I hope there is all what needs to be. That shows a [I]table 1[/I] when the page opens. There is also a button and it loads an other table, [I]table 2[/I] of the external file “script.js” where is also the code of the [I]table 1[/I].
My problem is that when I click the button, I get the table 2, but it is on a new page and it doesn’t go to the [I]text_div[/I] section and neither it does go between the table tags. All the other tags of the table are in the script.js file.

to post a comment
JavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@pjmancoFeb 08.2015 — a very simple problem what you want is to change a view but remain in the same page right? What you need is the innerHTML function for example;

<html>

<h2 id="hello">

hello</h2>

<script>

document.getElementById("hello").innerHTML = "hi";

</script>

</html>

in this situation you changed the text from hello to hi. In your situation you want the table1 to be table2. What you neen is put the html code of the table1 inside another identified element and put table 2 inside the javascript code innerHTML. example

<table id="table">

<script>

document.getElementById("table").innerHTML = "<table2></table2>";

</Script>

</html>
Copy linkTweet thisAlerts:
@rogkauthorFeb 09.2015 — 
<script>

document.getElementById("table").innerHTML = "<table2></table2>";

</Script>

</html>[/QUOTE]

Thank you very much. Now it works very well but would you pjmanco or somebody else help me a little bit more, please. What if I do it with the <select>.

[I]<select id="round" onchange="myFunction()">

<option value="1 selected">1</option>

<option value="2">2</option>

<option value="3">3</option>

<option value="4">4</option>

</select> [/I]

I mean if I have four options (or more) and four diffrend kind of tables, for example. This is more complicated. I think there should be <select onchange="myFunction()"> but how does the script goes. I have tried to find a good webpage which would have helped me but without success so far. I would appreciate your help again. Thank you:-)
Copy linkTweet thisAlerts:
@rogkauthorFeb 10.2015 — I tried and tried and I did it like this. Is this the way to do it?

[I]<!DOCTYPE html>

<html>

<body>

<select id="mySelect" onchange="myFunction()">

<option value="1">1

<option value="2">2

<option value="3">3

</select>

<h1>Round:</h1>

<table id="round">

<script>

function myFunction() {

var x = document.getElementById("mySelect").value;

if (x == 1) {

document.getElementById("round").innerHTML = "<tr><td>Table 1</td></tr>";

} else if (x == 2) {

document.getElementById("round").innerHTML = "<tr><td>Table 2</td></tr>";

} else if (x == 3) {

document.getElementById("round").innerHTML = "<tr><td>Table 3</td></tr>";

}

}

</script>

</table>

</body>

</html>[/I]
Copy linkTweet thisAlerts:
@Sup3rkirbyFeb 10.2015 — I don't really think [B]innerHTML[/B] is the best way to handle changing a [B]<table>[/B] tag's contents. While it might be the easiest, it probably isn't the best. But if we ignore that for now, you'll probably want to use [I]arrays[/I] to store each 'table', instead of using a bunch of [I]if/else[/I] statements (or even a [I]switch/case[/I] statement).
[code=html]
<!DOCTYPE html>
<html>
<head>
<title>Dynamically Load Tables</title>
</head>
<body>

<select id="mySelect" onchange="myFunction()">
<option value="0">1</option>
<option value="1">2</option>
<option value="2">3</option>
</select>

<h1>Round:</h1>
<table id="round"></table>

<script>
var $tables = ['<tr><td>Table 1</td></tr>', '<tr><td>Table 2</td></tr>', '<tr><td>Table 3</td></tr>'];
function myFunction() {
document.getElementById("round").innerHTML = $tables[parseInt(document.getElementById("mySelect").value)];
}
(function(){ myFunction(); })();
</script>

</body>
</html>
[/code]
Copy linkTweet thisAlerts:
@rogkauthorFeb 10.2015 — Thank you, Sup3rkirby!

I tried it with your code and it worked well. The thing is that I am a beginner and I understood my code but I really don't understand yours... yet. :-)
Copy linkTweet thisAlerts:
@Troy_IIIFeb 12.2015 — Why are you using: (function(){ myFunction(); })();

?!!

Instead of, say:

myFunction();

or simply:

...}();
×

Success!

Help @rogk spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...