Can you just openly mix javascript with html while using html5? - javascript

So, I'm trying to make an html5 website, and I'm trying to make a popup, "error" message using javascript, but I'm currently using html. and so when I tried
alert("nope wrong >:D")
and it didn't work. it was inside of a script tag but it still didn't work and so I'm not sure if I'm just meant to use html for that. the question overall is, do I have to use something like
<!DOCTYPE html>
like when youre making an html website or just like
<!-- container -->
or what I need help. thx in advance for any help I get :)

<!DOCTYPE html> & <!-- container --> have nothing to do with javascript notifacations. You are correct about the <script></script> part. You just need to put it in a function:
<script>
function myAlert() {
alert("nope wrong >:D");
}
</script>
and then to call that function, use a button:
<button onclick="myAlert()">Click Me</button>
or call it on the body so when the page loads you get notified:
<body onload="myAlert">
EDIT: Here is a runnable code snippet
<button onclick="myAlert()">Click Me</button>
<script>
function myAlert() {
alert("nope wrong >:D");
}
</script>
also, good luck!

Related

Onclick function not work in IE 11

I'm trying to add a submit function in my HTML and refer to a js file with my function. The code runs successfully in Chrome but not in IE11. The error message is "submitFunc(event) is undefined". Could anyone help me fix this problem? I have tried everything I can. T.T
function submitFunc(event) {
console.log("Hey what are you looking for? ")
}
<html>
<div>
<input class="btn btn-primary" type="submit" value="submit" onclick="submitFunc(event)">
</div>
</html>
<script type="text/javascript" src="/static/js/main.js"></script>
It might be that your <script> tag in outside of the <html>...</html> block. Try moving it up into the a <head>...</head> section just after the first <html> tag.
I don't know if you still need help, but you're loading the JavaScript file after setting up the on-click event. I would assume that means you don't have the function defined yet. I would move the "script" tag before the elements.

Modify a code snippet and print the result

I'm a web designer but i'm starting to learn some coding.
Probably this question may seem very basic, but I've been pulling my hear out trying to figure out where to begin.
I want to build a small tool for myself that can replace several values in a chunk of code at once.
Let's say I have this:
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<iframe src="about:blank" id="myiframe" style="display:none;"></iframe>
</body>
</html>
I want to build a form where I can type the values I need to change, submit and then print the resulting code. In this example I'd need to replace about:blank and myiframe.
The printed result must be:
<iframe src="myNewValue" id="anotherNewValue" style="display:none;"></iframe>
What would be the best way to proceed?
Hey I think this should do it. No PHP necessary just make a Javascript function like below; and if you want this to run when a button is clicked or something just say onclick="changey()"
<script>
function changey() {
document.getElementById('myiframe').src = 'myNewValue';
document.getElementById("myiframe").setAttribute("id", "div_top2");
}
</script>

My javascript will not load my defined DIV?

I am new to coding and trying to implement some javascript into my site.
I have found this code online that does what I want it to do on jsfiddle and it works perfectly. When I copy the code exactly from jsfiddle to my coding program it wont load what I want it to load. I have included the HTML, CSS and JS to show how I am trying to get this working and how it should work.
Here is my javascript:
var startY = 70;
$(window).scroll(function () {
checkY();
});
function checkY() {
if ($(window).scrollTop() > startY) {
$('#skills-left').slideDown();
}
}
Code working on jsfiddle: http://jsfiddle.net/rkerswell/jrpof73y/
When this code is transferred over to my program the code doesn't load the animation as described.
Am I missing something?
As mentioned by #tabz100
Make sure you wrap your javascript in this to ensure the code is run after the DOM elements are present. JSFiddle does this automatically.
$(function(){
// Put code here
});
Make sure you add the html code into the body tag when you copy it into the code editor and link jquery in the head tag.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
</body>
</html>

Javascript automatically click onclick

I am at a loss here, I am modifying a template for whmcs and I am trying to get an onclick event to launch when the page loads. I have tried the methods here but for the life of me I can't get it to work. How would you do this?
Here is the code:
<div><label><input type="radio" name="domainoption" value="incart" id="selincart" onclick="document.getElementById('register').style.display='none';document.getElementById('transfer').style.display='none';document.getElementById('owndomain').style.display='none';document.getElementById('subdomain').style.display='none';document.getElementById('incart').style.display=''" /> {$LANG.cartproductdomainuseincart}</label></div>
I got it to work guys. I appreciate all your help. Turns out, its a SMARTY template, so it was not parsing the {} correctly. Hence why it didn't work with any examples and 3 hours of me struggling for a stupid problem. I wasn't using {literal}.
Thanks for those that didn't put me down for asking a stupid question...
If you want to execute javascript on page load, you can use body onload
<script>
function load()
{
alert("Page is loaded");
}
</script>
<body onload="load()">
<h1>Hello World!</h1>
</body>
If you are okay with Jquery, Use trigger to run your click codes :
Example :
$(document).ready(function() {
$('#yourId').trigger("click");
});

change innerHTML to nearby document

I would like to have a section of my webpage's contents to change upon a button click. However, the content I'd like to have change includes formatting itself, and I would prefer to have the content in a separate document.
I would like it to look something like this, but I'm okay with any solution:
<html>
<head>
<script type="text/javascript">
function swap() {
document.getElementById('toChange').innerHTML = '<!--#include virtual="../newContent.htm"-->';
}
</script>
</head>
<body>
<span id="toChange">Temp Text</span>
<input type="button" onclick="swap()" value="Change" />
</body>
</html>
The problem is obviously with the include statement in swap() but I don't know how to change it appropriately. Thanks.
Basically server side includes don't work in this context; you will have to resort to AJAX requests.
You didn't tag your question with jquery, but you could read up what it does behind the scenes:
function swap() {
$('#toChange').load('../newContent.htm');
}
jQuery.load() reads the contents from ../newContent.htm using an AJAX call and then stores that HTML inside the toChange span.
As far as I know your probably going to need JSON and AJAX for your request. I do know that changing the data content without making a new request is what JSON and AJAX are used for mostly. It will update the page dynamically without reloading. JSON is built-in to Javascript so your actually on the right path. Hopefully it helps somewhat.

Categories