I'm making an application with the LoL (league of legends) api.
Currently I'm having trouble with my input. First I made an inputbox and submitbutton in JavaScript and wrote some code so I could use it.
var inputbox = document.createElement("input");
inputbox.type = "input";
document.body.appendChild(inputbox);
var button = document.createElement("input")
button.type = "button";
button.value = "Press me!";
document.body.appendChild(button);
Afterwards I used this code to use the input value.
button.addEventListener("click", function() {
LookUpSummonerInformation(inputbox.value);
});
My question is how can I put this into my index.html instead of my js file.
I can't use a form to do it as it will probably be a single page application.
Thanks in advance.
<!DOCTYPE html>
<html>
<head>
<title>LoL Thing</title>
</head>
<body>
<input type='input' id='lol-input'></input>
<button onclick='do_the_thing();'>Press me!</button>
<script>
function do_the_thing() {
var inputbox = document.querySelector('#lol-input');
LookUpSummonerInformation(inputbox.value);
}
</script>
</body>
</html>
Here's a simple example of how you would mix the JS with HTML.
I guess that you are looking for something like this
<html>
<head>
<script>
document.onload = function(){
var inputbox = document.createElement("input");
inputbox.type = "input";
document.body.appendChild(inputbox);
var button = document.createElement("input")
button.type = "button";
button.value = "Press me!";
button.addEventListener("click", function() {
LookUpSummonerInformation(inputbox.value);
});
document.body.appendChild(button);
}
</script>
</head>
<body>
...
</body>
</html>
You can always include JavaScript code using a <script> tag in the body of your html document.
Eg:
<html>
<head>
<!-- Head code here -->
</head>
<body>
<script>
// Your JavaScript code goes here
</script>
<!-- Remaining body code here -->
</body>
<html>
Alternatively
You can link javascript to your index file also using a <script> tag.
Eg:
<html>
<head>
<!-- Head code here -->
</head>
<body>
<script src="path_to_your_js_file"></script>
<!-- Remaining body code here -->
</body>
<html>
Related
I'm trying to use the onClick() function inside the script tag.
<!DOCTYPE html>
<html>
<head>
<script>
const btn = document.getElementById("mainButton");
btn.onclick = function(){
alert("You shouldn't have clicked this button!");
};
</script>
</head>
<body>
<button id="mainButton">Do not click this button</button>
</body>
</html>
When I looked on the internet to find the syntax to do this it looked something like the above.
However when I run this script it doesn't work and I have no clue why and Any other way I've tried becomes a syntax error.
You need to use defer or move the script tag to the end of the body.
<!DOCTYPE html>
<html>
<head>
<script>
document.addEventListener('DOMContentLoaded', () => {
const btn = document.getElementById("mainButton");
btn.onclick = function(){
alert("You shouldn't have clicked this button!");
};
});
</script>
</head>
<body>
<button id="mainButton">Do not click this button</button>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button id="mainButton">Do not click this button</button>
<script>
const btn = document.getElementById("mainButton");
btn.onclick = function(){
alert("You shouldn't have clicked this button!");
};
</script>
</body>
</html>
I have a form with a button written in a .asp page and when it's clicked, it calls for a js function. I need to figure a way to debug this using developer tools.
<html>
<head>
<title>Test</title>
<script type="text/javascript">
$(document).ready(function() {
$("#butReport").bind("click", butReport_onClick);
});
function butReport_onClick() {
var cReportOptions = null;
//some code
};
</script>
</head>
<body>
some code.
</body>
</html>
I don't think this has anything to do with classic ASP.
You are missing the jQuery definition in this code, see here https://www.w3schools.com/jquery/jquery_get_started.asp
I added this
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<title>Test</title>
<script type="text/javascript">
$(document).ready(function() {
$("#butReport").bind("click", butReport_onClick);
});
function butReport_onClick() {
var cReportOptions = null;
//some code
console.log("Hello");
};
</script>
</head>
<body>
<div id="butReport">some code.</div>
</body>
</html>
When I click it I get this:
I hope this helps
button written in asp with id="butReport". Using javascript:
<button id="butReport"></button>
<script type="text/javascript">
var elem=document.getElementById('butReport').onclick = function(){
// some code
// test not using console.log();
document.getElementById('hasilnya').innerHTML = 'test';
}
</script>
<div id="hasilnya" style="margin-top:1em;"></div>
So I need some help, I am new to JS and I need to to find a solution to the problem I am having. I am trying to create a button when it clicks changes a piece of text. When I create a JS function in the script tag header and reference the function in the button onclick it works, but it doesn't work in a separate JS file. The HTML code is below. Hopefully, someone can help me.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="changetext.js"></script>
<script>
function Button() {
document.getElementById("demo").innerHTML = "hello";
}
</script>
<script>
function Button2() {
document.getElementById("demo").innerHTML = "hi";
}
</script>
</head>
<body>
<p id="demo"> hi</p>
<button id="ButtonText" onclick="Button()"> Click Here To Change The Text</button>
<button id="ButtonText2" onclick="Button2()"> Click Here To Change The Text Back</button>
<script type="text/javascript" src="changetext.js"></script>
</body>
</html>
this is an example...
<!DOCTYPE html>
<html>
<head>
<title>example</title>
</head>
<body>
<p id="demo"> hi</p>
<button id="ButtonText" onclick="Button()"> Click Here To Change The Text</button>
<button id="ButtonText2" onclick="Button2()"> Click Here To Change The Text Back</button>
<script type="text/javascript" src="changetext.js"></script>
</body>
</html>
first you need remove your script.. we include script only if you dont use a external js.
on your external js(changetext.js)
function Button(){
document.getElementById("demo").innerHTML = "hello from button 1";
}
function Button2(){
document.getElementById("demo").innerHTML = "Hellow from button2";
}
result:
if you dont use a external js the code is this:
<!DOCTYPE html>
<html>
<head>
<title>example</title>
</head>
<body>
<p id="demo"> hi</p>
<button id="ButtonText" onclick="Button();"> Click Here To Change The Text</button>
<button id="ButtonText2" onclick="Button2();"> Click Here To Change The Text Back</button>
<script type="text/javascript" src="changetext.js"></script>
</body>
</html>
<script>
function Button(){
document.getElementById("demo").innerHTML = "hello from button 1";
}
function Button2(){
document.getElementById("demo").innerHTML = "Hellow from button2";
}
</script>
we write the code js in the tag script good luck !!
Write your function in changetext.js and make sure that is in same place as your HTML file.
change onclick to onClick
and remove your script tags in the head
So i went as far as creating an entirely new HTML document to change my H1 class to a different color. Can someone please tell me why its not working? I dont understat because I literally copied exactly how to change the color and I've done it before but its not working now.
<!DOCTYPE html>
<html>
<head>
<script>
var box = document.getElementById("box");
boxStyle = box.style;
boxStyle.color = 'red';
</script>
</head>
<body>
<h1 id="box">NBA Legends</h1>
</body>
</html>
If you move the <script> tag after the <h1> tag it will work:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 id="box">NBA Legends</h1>
<script>
var box = document.getElementById("box");
boxStyle = box.style;
boxStyle.color = 'red';
</script>
</body>
</html>
It is a best practice to put the <script> tag at the end of the document. This way the HTML renders and then the JS executes.
here its working. JS is executing before html can be render.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 id="box1">NBA Legends</h1>
</body>
<script>
var box = document.getElementById("box1");
boxStyle = box.style;
boxStyle.color = 'red';
</script>
</html>
So this is what i did when i used the put the JavaScript on a separate page:
(And i made sure the source page name is yellow.js)
<!DOCTYPE html>
<html>
<head>
<script src="yellow.js"></script>
</head>
<body>
<h1 id="box" onload="change()">NBA Legends</h1>
</body>
</html>
function change() {
var box = document.getElementById("box");
boxStyle = box.style;
boxStyle.color = 'red';
}
Lets assume that I have an input box on a page. I click a button and whatever is in the input, is transferred to another page and retrieved using JavaScript.
Page1 = C:\Documents\page1.html
Page1 code:
<!DOCTYPE html>
<html>
<body>
<p>Name: <input type="text" id="user_input"</input></p>
<button onclick="start_page_2()">submit</button>
<script>
var start_page_2 = function(){
contents = document.getElemeentById("user_input").value;
//code to go to page 2;
}
</script>
</body>
</html>
Page2 = C:\Documents\page2.html
Page2 code:
<DOCTYPE html>
<html>
<body>
<h1 id="my_title">empty</h1>
<script>
//on load execute this {
//retrive contents from page1 and save as contents
//document.getElementById("my_title").innerHTML(contents);
//}
</script>
</body>
</html>
*Note that the input will contain spaces (if that's any help). All useful answers will be voted up.
You could just use localStorage
page1
<!DOCTYPE html>
<body>
<p>Name: <input type="text" id="user_input"</input></p>
<button onclick="start_page_2()">submit</button>
<script>
var start_page_2 = function(){
var contents = document.getElementById("user_input").value;
localStorage.setItem('user', contents);
window.location.href = 'page2.html';
}
</script>
</body>
</html>
page2
<DOCTYPE html>
<body>
<h1 id="my_title">empty</h1>
<script>
var full_name = localStorage.getItem('user');
document.getElementById("my_title").innerHTML = full_name;
</script>
</body>
</html>
This only works if you use an actual webserver to test your pages, and there's a polyfill for older browsers on MDN