This is a work in progress (a calculator and some other stuff), but what I'm trying to do at the moment is whenever you type in some number into the results of the calculator, and you press "+" the onclick will call checkValidity which will determine if what you typed in was integer or not integer. It will send an alert saying integer or not an integer. My issue is that the onclick won't do anything. I tried emptying the checkValidity function of everything but alert("test); and it still won't work. Could someone please explain what I'm doing wrong?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript>">
function checkValidity()
{
var Calculator = document.getElementById("Calculator")
if (Calculator.Result.value === parseInt(test, 10))
{
alert("Integer!");
}
else
{
alert("Not an integer, press C");
}
}
</script>
<form name="Calculator">
First name:
<br>
<input type="text" name="firstname">
<br>
Last name:
<br>
<input type="text" name="lastname">
<br>
Student ID:
<br>
<input type="text" name="ID">
<br>
Biography:
<br>
<textarea maxlength=30 rows="2" cols="30">
</textarea>
<br>
Result:
<table border="1" style="width:100%">
<input type="text" name="Result" size="12">
<tr>
<td><Input type="button" Name="zero" Value="0" OnClick="Calculator.Result.value += '0'"> </td>
<td><Input type="button" Name="one" Value="1" OnClick="Calculator.Result.value += '1'"></td>
<td><Input type="button" Name="two" Value="2" OnClick="Calculator.Result.value += '2'"></td>
<td><Input type="button" Name="three" Value="3" OnClick="Calculator.Result.value += '3'"></td>
</tr>
<tr>
<td><Input type="button" Name="four" Value="4" OnClick="Calculator.Result.value += '4'"></td>
<td><Input type="button" Name="five" Value="5" OnClick="Calculator.Result.value += '5'"></td>
<td><Input type="button" Name="six" Value="6" OnClick="Calculator.Result.value += '6'"></td>
<td><Input type="button" Name="seven" Value="7" OnClick="Calculator.Result.value += '7'"></td>
</tr>
<tr>
<td><Input type="button" Name="eight" Value="8" OnClick="Calculator.Result.value += '8'"></td>
<td><Input type="button" Name="nine" Value="9" OnClick="Calculator.Result.value += '9'"></td>
<td><Input type="button" Name="plus" Value="+" OnClick="checkValidity()"></td>
<td><Input type="button" Name="minus" Value="-" OnClick="Calculator.Result.value += '-'"></td>
</tr>
<tr>
<td><Input type="button" Name="equals" Value="=" OnClick="Calculator.Result.value = eval(Calculator.Result.value)"></td>
<td><Input type="button" Name="divide" Value="/" OnClick="Calculator.Result.value += '/'"></td>
<td><Input type="button" Name="multiply" Value="*" OnClick="Calculator.Result.value += '*'"></td>
<td><Input type="button" Name="clear" Value="C" OnClick="Calculator.Result.value = ''"></td>
</tr>
</table>
<span id="HoursWorkedThisWeek"></span>
<Input type="button" Name="Save" Value="Save" OnClick="Calculator.HoursWorkedThisWeek = Calculator.Result.value">
<Input type="button" Name="Submit" Value="Submit">
</form>
</head>
</html>
try this it worked
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form id="Calculator" name="Calculator">
First name:
<br>
<input type="text" name="firstname">
<br>
Last name:
<br>
<input type="text" name="lastname">
<br>
Student ID:
<br>
<input type="text" name="ID">
<br>
Biography:
<br>
<textarea maxlength=30 rows="2" cols="30">
</textarea>
<br>
Result:
<table border="1" style="width:100%">
<input type="text" name="Result" size="12">
<tr>
<td><Input type="button" Name="zero" Value="0" OnClick="Calculator.Result.value += '0'"> </td>
<td><Input type="button" Name="one" Value="1" OnClick="Calculator.Result.value += '1'"></td>
<td><Input type="button" Name="two" Value="2" OnClick="Calculator.Result.value += '2'"></td>
<td><Input type="button" Name="three" Value="3" OnClick="Calculator.Result.value += '3'"></td>
</tr>
<tr>
<td><Input type="button" Name="four" Value="4" OnClick="Calculator.Result.value += '4'"></td>
<td><Input type="button" Name="five" Value="5" OnClick="Calculator.Result.value += '5'"></td>
<td><Input type="button" Name="six" Value="6" OnClick="Calculator.Result.value += '6'"></td>
<td><Input type="button" Name="seven" Value="7" OnClick="Calculator.Result.value += '7'"></td>
</tr>
<tr>
<td><Input type="button" Name="eight" Value="8" OnClick="Calculator.Result.value += '8'"></td>
<td><Input type="button" Name="nine" Value="9" OnClick="Calculator.Result.value += '9'"></td>
<td><Input type="button" Name="plus" Value="+" OnClick="checkValid()"></td>
<td><Input type="button" Name="minus" Value="-" OnClick="Calculator.Result.value += '-'"></td>
</tr>
<tr>
<td><Input type="button" Name="equals" Value="=" OnClick="Calculator.Result.value = eval(Calculator.Result.value)"></td>
<td><Input type="button" Name="divide" Value="/" OnClick="Calculator.Result.value += '/'"></td>
<td><Input type="button" Name="multiply" Value="*" OnClick="Calculator.Result.value += '*'"></td>
<td><Input type="button" Name="clear" Value="C" OnClick="Calculator.Result.value = ''"></td>
</tr>
</table>
<span id="HoursWorkedThisWeek"></span>
<Input type="button" Name="Save" Value="Save" OnClick="Calculator.HoursWorkedThisWeek = Calculator.Result.value">
<Input type="button" Name="Submit" Value="Submit">
</form>
<script type="text/JavaScript">
function checkValid()
{
var Calculator = document.getElementById("Calculator")
var test =Calculator[4].value;
if (parseInt(Calculator[4].value) === parseInt(test, 10))
{
alert("Integer!");
}
else
{
alert("Not an integer, press C");
}
}
</script>
</body>
</html>
You made a few small mistakes that caused your code to not work.
I'll explain them after this working example:
function validate() {
if (Calculator.Result.value == parseInt(Calculator.Result.value,10)) {
alert("Integer!");
} else {
alert("Not an integer, press C");
}
}
<body>
<form name="Calculator">
First name: <br /><input type="text" name="firstname" /><br />
Last name: <br /><input type="text" name="lastname" /><br />
Student ID: <br /><input type="text" name="ID" /><br />
Biography: <br /><textarea maxlength=30 rows="2" cols="30"></textarea><br />
Result:
<table border="1" style="width:100%;">
<input type="text" name="Result" size="12" />
<tr>
<td><input type="button" name="zero" value="0" onclick="Calculator.Result.value += '0'" /> </td>
<td><input type="button" name="one" value="1" onclick="Calculator.Result.value += '1'" /></td>
<td><input type="button" name="two" value="2" onclick="Calculator.Result.value += '2'" /></td>
<td><input type="button" name="three" value="3" onclick="Calculator.Result.value += '3'" /></td>
</tr>
<tr>
<td><input type="button" name="four" value="4" onclick="Calculator.Result.value += '4'" /></td>
<td><input type="button" name="five" value="5" onclick="Calculator.Result.value += '5'" /></td>
<td><input type="button" name="six" value="6" onclick="Calculator.Result.value += '6'" /></td>
<td><input type="button" name="seven" value="7" onclick="Calculator.Result.value += '7'" /></td>
</tr>
<tr>
<td><input type="button" name="eight" value="8" onclick="Calculator.Result.value += '8'" /></td>
<td><input type="button" name="nine" value="9" onclick="Calculator.Result.value += '9'" /></td>
<td><input type="button" name="plus" value="+" onclick="validate()" /></td>
<td><input type="button" name="minus" value="-" onclick="Calculator.Result.value += '-'" /></td>
</tr>
<tr>
<td><input type="button" name="equals" value="=" onclick="Calculator.Result.value = eval(Calculator.Result.value)" /></td>
<td><input type="button" name="divide" value="/" onclick="Calculator.Result.value += '/'" /></td>
<td><input type="button" name="multiply" value="*" onclick="Calculator.Result.value += '*'" /></td>
<td><input type="button" name="clear" value="C" onclick="Calculator.Result.value = ''" /></td>
</tr>
</table>
<span id="HoursWorkedThisWeek"></span>
<input type="button" name="Save" value="Save" onclick="Calculator.HoursWorkedThisWeek = Calculator.Result.value" />
<input type="button" name="Submit" value="Submit" />
</form>
</body>
(fiddle: http://jsfiddle.net/z8umk2c6/6/)
You had all your elements inside the <head> tag. Only the <script> should be inside the head (or better yet, in a separate JS-file), all the HTML elements should be inside a <body> tag.
Your form didn't have an id, only a name. Therefor the variable Calculator (bad practice to use uppercase for variable-names) referred to nothing. In your case you don't even need the variable, because you just access the form by name directly, so I removed that variable at the start of the function.
(I recommend using ID's instead of names however, but that might just be personal preference.)
The === in the if-clause didn't work, it was too strict. == will work however.
"test" in the if-clause was nothing, it had no value. I rewrote the if-clause so that the value is checked against the integer-value of itself. If that integer-value is equals the original value, you know the original was an integer already.
And a few other mistakes that may or may not break the code, but were bad practice non the less:
OnClick should be onclick (all lowercase). Same goes for Name and Value.
Some <input> were written with an uppercase: <Input>.
<br> and <input> need their own closing tags, like so: <br /> and <input />
Related
Trying to make a small numberpad as shown in the picture attached as apart of my Javascript practice. Loooking for help/tips that could possibly fix or pit me in the right direction in to getting a working Numpad that has a working reset function. Without the reset function code, im able to input numbers into my textbox. but the additional code lose functionality.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Q4</title>
</head>
<body>
<form action="" method="" name="Q4">
<table cellpadding="3" cellspacing="3" border="0">
<td colspan="3"><input id=Key type="text" value="" maxlength="10" name="Key" /></td>
<tr>
<td> <input type="button" value="1" id="1" " style="font-size:25px;" onClick=addNumber(this); /></td>
<td> <input type="button" value="2" id="2" " style="font-size:25px;" onClick=addNumber(this); /></td>
<td> <input type="button" value="3" id="3" " style="font-size:25px;" onClick=addNumber(this); /></td>
</tr>
<tr>
<td><input type="button" value="4" id="4" " style="font-size:25px;" onClick=addNumber(this); /></td>
<td><input type="button" value="5" id="5" " style="font-size:25px;" onClick=addNumber(this); /></td>
<td><input type="button" value="6" id="6" " style="font-size:25px;" onClick=addNumber(this); /></td>
</tr>
<tr>
<td><input type="button" value="7" id="7" " style="font-size:25px;" onClick=addNumber(this); /></td>
<td><input type="button" value="8" id="8" " style="font-size:25px;" onClick=addNumber(this); /></td>
<td><input type="button" value="9" id="9" " style="font-size:25px;" onClick=addNumber(this); /></td>
</tr>
<tr>
<td colspan="3"><input type="button" value="Reset" id="Reset" onClick=clearNumber(this); /> </td>
</tr>
</table>
<script>
function addNumber(element){
document.getElementById('Key').value = document.getElementById('Key').value+element.value;
}
function Reset {
document.getElementById("Key").reset();
}
</script>
</body>
</html>
Try this..
function addNumber(element) {
document.getElementById('Key').value = document.getElementById('Key').value+element.value;
}
function clearNumber() {
document.getElementById("Key").value = "";
}
<table cellpadding="3" cellspacing="3" border="0">
<tr>
<td colspan="3">
<input id="Key" type="text" value="" maxlength="10" name="Key" />
</td>
</tr>
<tr>
<td>
<input type="button" value="1" id="1" style="font-size:25px;" onclick="addNumber(this)" />
</td>
<td>
<input type="button" value="2" id="2" style="font-size:25px;" onclick="addNumber(this)" />
</td>
<td>
<input type="button" value="3" id="3" style="font-size:25px;" onclick="addNumber(this)" />
</td>
</tr>
<tr>
<td>
<input type="button" value="4" id="4" style="font-size:25px;" onclick="addNumber(this)" />
</td>
<td>
<input type="button" value="5" id="5" style="font-size:25px;" onclick="addNumber(this)" />
</td>
<td>
<input type="button" value="6" id="6" style="font-size:25px;" onclick="addNumber(this)" />
</td>
</tr>
<tr>
<td>
<input type="button" value="7" id="7" style="font-size:25px;" onclick="addNumber(this)" />
</td>
<td>
<input type="button" value="8" id="8" style="font-size:25px;" onclick="addNumber(this)" />
</td>
<td>
<input type="button" value="9" id="9" style="font-size:25px;" onclick="addNumber(this)" />
</td>
</tr>
<tr>
<td colspan="3">
<input type="button" value="Reset" id="Reset" onclick="clearNumber(this)" />
</td>
</tr>
</table>
Still a beginner in using jquery, and its about making a calculator, I know this is a big problem because it still has an error in it and there's a lot of code to be done to make it work, so what I need is adding, subtracting, multiplying, and dividing two numbers, and upon pressing the operator the first number that was pressed wouldn't be gone rather it will be gone and be change after pressing for the second number. It would also be a big thanks if y'all could help me my problem. Thanks a lot.
$(document).ready(function() {
var number = "";
$(".numeric").click(function() {
var num = $(this).val();
number = number + "" + num;
$("#container").val(number);
});
$(".clear").click(function() {
$("#container").val("");
number = "";
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Sample Calculator</title>
</head>
<body>
<input type="text" id="container" placeholder="" readOnly="readOnly" />
<br /><br />
<table border="1" cellpadding="3">
<tbody>
<tr>
<td>
<input type="button" class="numeric" value="7" />
</td>
<td>
<input type="button" class="numeric" value="8" />
</td>
<td>
<input type="button" class="numeric" value="9" />
</td>
<td>
<input type="button" class="operation" value="+" />
</td>
</tr>
<tr>
<td>
<input type="button" class="numeric" value="4" />
</td>
<td>
<input type="button" class="numeric" value="5" />
</td>
<td>
<input type="button" class="numeric" value="6" />
</td>
<td>
<input type="button" class="operation" value="-" />
</td>
</tr>
<tr>
<td>
<input type="button" class="numeric" value="1" />
</td>
<td>
<input type="button" class="numeric" value="2" />
</td>
<td>
<input type="button" class="numeric" value="3" />
</td>
<td>
<input type="button" class="operation" value="*" />
</td>
</tr>
<tr>
<td>
<input type="button" class="numeric" value="0" />
</td>
<td>
<input type="button" class="operation" value="=" />
</td>
<td>
<input type="button" class="operation" value="/" />
</td>
<td>
<input type="button" class="clear" value="Clear" />
</td>
</tr>
</tbody>
</table>
</body>
</html>
<body>
<center>
<h1>Online Calculator</h1>
<hr/>
<form name="frmCalculator" action="">
<table border="1" cellpadding="1" cellspacing="1" width="30%">
<tr>
<td colspan="4"><textarea style="width:100%" name="txtResult"></textarea></td>
</tr>
<tr>
<td colspan="4"><input type="reset" style="width:100%"/></td>
</tr>
<tr>
<td><input type="button" value=" 7 " onclick="7"/></td>
<td><input type="button" value=" 8 " onclick="8"/></td>
<td><input type="button" value=" 9 " onclick="9"/></td>
<td><input type="button" value=" + " onclick="plus()"/></td>
</tr>
<tr>
<td><input type="button" value=" 4 " onclick="4"/></td>
<td><input type="button" value=" 5 " onclick="5"/></td>
<td><input type="button" value=" 6 " onclick="6"/></td>
<td><input type="button" value=" - " onclick="subtract()"/></td>
</tr>
<tr>
<td><input type="button" value=" 1 " onclick="1"/></td>
<td><input type="button" value=" 2 " onclick="2"/></td>
<td><input type="button" value=" 3 " onclick="3"/></td>
<td><input type="button" value=" * " onclick="times()"/></td>
</tr>
<tr>
<td><input type="button" value=" 0 " onclick="0"/></td>
<td><input type="button" value=" . " onclick="."/></td>
<td><input type="button" value=" = " onclick="total()"/></td>
<td><input type="button" value=" / " onclick="divide()"/></td>
</tr>
</table>
</form>
</center>
</body>
I'm making a calculator. How do I make the input from the button display on the textarea? I have to make the numbers display on the text area like a normal calculator. I can't use jquery because we haven't learned it yet.
To add the numbers to the textarea you can use this code:
var button = document.querySelectorAll('input[type=button]');
for(var x=0; x<button.length; x++)
{
button[x].addEventListener('click', function(e) {
var a = document.getElementById('txt').value;
document.getElementById('txt').value = a + this.value;
});
}
If you want a list of all elements that match a selector, you can use document.querySelectorAll() and loop through the object list.
You will need to alter your html and delete all the wrong onclicks, you too should use the value attribute only for the actual value and not for code styling, as the output will include your spaces, too.
<center>
<h1>Online Calculator</h1>
<hr/>
<form name="frmCalculator" action="">
<table border="1" cellpadding="1" cellspacing="1" width="30%">
<tr>
<td colspan="4"><textarea style="width:100%" id="txt" name="txtResult"></textarea></td>
</tr>
<tr>
<td colspan="4"><input type="reset" style="width:100%"/></td>
</tr>
<tr>
<td><input type="button" value="7"/></td>
<td><input type="button" value="8"/></td>
<td><input type="button" value="9"/></td>
<td><input type="button" value="+" /></td>
</tr>
<tr>
<td><input type="button" value="4" /></td>
<td><input type="button" value="5" /></td>
<td><input type="button" value="6" /></td>
<td><input type="button" value="-" /></td>
</tr>
<tr>
<td><input type="button" value="1" /></td>
<td><input type="button" value="2"/></td>
<td><input type="button" value="3" /></td>
<td><input type="button" value="*" /></td>
</tr>
<tr>
<td><input type="button" value="0" /></td>
<td><input type="button" value="." /></td>
<td><input type="button" value="="/></td>
<td><input type="button" value="/" /></td>
</tr>
</table>
</form>
</center>
I didn't implement the calculating functions, but I hope this is enough for you to start with.
Simplistically, you can do:
<input type="button" value="7" onclick="this.form.txtResult.value = this.value">
However, you may want to add a listener to each button that is a number that does the same thing. The easiest way to do that is to add a class to the number buttons and give them all the same listener, so:
<input type="button" value="7" class="numberButton">
and use the load event to add the listeners:
window.onload = function() {
var buttons = document.querySelectorAll('.numberButton');
for (var i=0, iLen=buttons.length; i<iLen; i++) {
buttons[i].onclick = function(){
this.form.txtResult.value += this.value;
};
}
};
You can also add specific listeners for the other buttons.
PS. To get the buttons all the same size, use styles to set the width the same, don't use the value.
I had to create a simple calculator to handle basic math problems. I created the calculator using a table, and a text form to hold the solution. Each button is supposed to set the variable inputString equal to the return value of the updateString() function.
<table class = "calculator">
<tr>
<td colspan='4'>
<form action="">
<div class="calc">
<input type="text" value=""/>
</div>
</form>
</td>
</tr>
<tr>
<td><input class="calc" type="button" value="1" onclick="inputString = updateString('1');"/></td>
<td><input class="calc" type="button" value="2" onclick="inputString = updateString('2');"/></td>
<td><input class="calc" type="button" value="3" onclick="inputString = updateString('3');"/></td>
<td><input class="calc" type="button" value='/' onclick="inputString = updateString('/');"/></td>
</tr>
<tr>
<td><input class="calc" type="button" value="4" onclick="inputString = updateString('4');"/></td>
<td><input class="calc" type="button" value="5" onclick="inputString = updateString('5');"/></td>
<td><input class="calc" type="button" value="6" onclick="uinputString = updateString('6');"/></td>
<td><input class="calc" type="button" value='*' onclick="inputString = updateString('*');"/></td>
</tr>
<tr>
<td><input class="calc" type="button" value="7" onclick="inputString = updateString('7');"/></td>
<td><input class="calc" type="button" value="8" onclick="inputString = updateString('8');"/></td>
<td><input class="calc" type="button" value="9" onclick="inputString = updateString('9');"/></td>
<td><input class="calc" type="button" value='-' onclick="inputString = updateString('-');"/></td>
</tr>
<tr>
<td><input class="calc" type="button" value="0" onclick="inputString = updateString('0');"/></td>
<td><input class="calc" type="button" value='.' onclick="inputString = updateString('.');"/></td>
<td><input class="calc" type="button" value='C' onclick="inputString = updateString('C');"/></td>
<td><input class="calc" type="button" value='+' onclick="inputString = updateString('+');"/></td>
</tr>
<tr>
<td><input class="calc" type="button" value='=' onclick="document.forms[0].value = eval(inputString);"/></td>
</tr>
</table>
This is the function that I created to handle the updating of the String with each button press
function updateString(p1){
var inputString;
inputString += p1;
return inputString;
}
Add an ID to the input field
<div class="calc">
<input id="outputBox" type="text" value="" />
</div>
And set it's value to the inputString
function updateString(p1){
inputString += p1;
document.getElementById("outputBox").value = inputString;
return inputString;
}
jsFiddle Demo
The final calculation (=) works the same way
onclick=" document.getElementById('outputBox').value = eval(inputString);"
From what I understood of your question, to solve it, you can use JQuery that'll allow you to display the returned value in the DOM
function updateString(p1){
var inputString;
inputString += p1;
$('.your-text-box').val(inputString);
}
I am working on a Calculator PhoneGap Application, but i can't get the button with function attached to them to work. I don't see what it stop it. Also the buttons do work in PC browsers but not on the a phone(Tested: Blackberry, Android). If any know how to fix this please let me know thanks.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="MinDark.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile.structure-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<style>
table {table-layout:fixed}
td {width:25%}
#td1 {width:75%}
#td2 {width:25%}
</style>
<div data-role="page" data-theme="a">
<div data-role="header">
Home
<h5 style="text-transform:uppercase">Basic Calculator</h5>
</div>
<div data-role="content">
<form name="calc">
<table width="100%">
<tr>
<td id="td1"><input type="text" name="cal" id="inbox"></td>
</tr>
<tr>
<td id="td2"><input type="button" value="=" onclick="equal()"></td>
</tr>
</table>
<table width="100%">
<tr>
<td><input type="button" value="7" onclick="calc.cal.value += '7'"></td>
<td><input type="button" value="8" onclick="calc.cal.value += '8'"></td>
<td><input type="button" value="9" onclick="calc.cal.value += '9'"></td>
<td><input type="button" value="+" onclick="calc.cal.value += '+'"></td>
</tr>
<tr>
<td><input type="button" value="4" onclick="calc.cal.value += '4'"></td>
<td><input type="button" value="5" onclick="calc.cal.value += '5'"></td>
<td><input type="button" value="6" onclick="calc.cal.value += '6'"></td>
<td><input type="button" value="-" onclick="calc.cal.value += '-'"></td>
</tr>
<tr>
<td><input type="button" value="1" onclick="calc.cal.value += '1'"></td>
<td><input type="button" value="2" onclick="calc.cal.value += '2'"></td>
<td><input type="button" value="3" onclick="calc.cal.value += '3'"></td>
<td><input type="button" value="x" onclick="calc.cal.value += '*'"></td>
</tr>
<tr>
<td><input type="button" value="0" onclick="calc.cal.value += '0'"></td>
<td><input type="button" value="." onclick="calc.cal.value += '.'"></td>
<td><input type="button" value="C" onclick="del()"></td>
<td><input type="button" value="รท" onclick="calc.cal.value += '/'"></td>
</tr>
</table>
</form>
</div>
</div>
<script language="javascript" type="text/javascript">
function equal(){
calc.cal.value = eval(calc.cal.value);
}
function del(){
calc.cal.value = calc.cal.value.substring(0,-1)
}
</script>
</body>
</html>
Update: I figured out what solves this from, the page needs to be reload after being open from the mainpage(index.html). I just don't know how to do that.
Solved: Add rel="external" to link.