Hvorfor vil dette ikke virke?
Jeg har et lille problem,i følgendene html er to éns script's,
det første virker men har forkert placering,
det andet virker ikke men har korrekt placering.
[code]
<html>
<head>
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">
<meta charset=\"UTF-8\"></meta>
<title>HELP FIXING THIS</title>
<style>
body {
font-family: Arial;
}
/* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
</style>
</head>
<body>
<!-- THIS WORK - BUT POSITION IS WRONG -->
<input type=\"text\">
<button>Submit</button>
<script>
var d = document;
d.querySelector('button').addEventListener('click',function(){
xhr = new XMLHttpRequest();
xhr.open('GET','/SOME?VALUE='+encodeURIComponent(d.querySelector('input').value));
xhr.send();
});
</script>
<!--/ THIS WORK - BUT POSITION IS WRONG -->
<div class=\"tab\">
<button class=\"tablinks\" onclick=\"openCity(event, 'site1')\" id=\"defaultOpen\">Site 1</button>
<button class=\"tablinks\" onclick=\"openCity(event, 'site2')\">Site 2</button>
</div>
<div id=\"site1\" class=\"tabcontent\">
<h3>Test</h3>
<p>Some Text!</p>
<p>
<!-- THIS DO NOT WORK - BUT RIGHT POSITION -->
<input type=\"text\">
<button>Submit</button>
<script>
var d = document;
d.querySelector('button').addEventListener('click',function(){
xhr = new XMLHttpRequest();
xhr.open('GET','/SOME?VALUE='+encodeURIComponent(d.querySelector('input').value));
xhr.send();
});
</script>
<!--/ THIS DO NOT WORK - BUT RIGHT POSITION -->
</p>
</div>
<div id=\"site2\" class=\"tabcontent\">
<h3>Site 2</h3>
<p>some text</p>
</div>
<script>
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName(\"tabcontent\");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = \"none\";
}
tablinks = document.getElementsByClassName(\"tablinks\");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(\" active\", \"\");
}
document.getElementById(cityName).style.display = \"block\";
evt.currentTarget.className += \" active\";
}
// Get the element with id=\"defaultOpen\" and click on it
document.getElementById(\"defaultOpen\").click();
</script>
</body>
</html>
[/code]
