Modify a code snippet and print the result - javascript

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>

Related

Writing to a field On a web Page

I want to create a simple HTML that on load will go to a URL and then put text in a textbox on the page. Below is the HTML that I came up with so far. It will open the page but will not enter the text that I put in.
Any ideas will be appreciated.
Thank you
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
document.body.innerHTML += 'Link';
document.getElementById("link").click();
</script>
<script>
function displayResult(element)
{
document.getElementById(element).value = "TEST";
}
}
</script>
displayResult("sb_form_q");
</body>
</html>
I tried the above code and I wanted it to put the text "TEST" in the text box on the form.
JavaScript (in a <script> element) runs in the current page. Navigating to a new page will kill the currently running JavaScript program.
If you want to run some JavaScript on the subsequent page then you need to put the JavaScript in that page. You, clearly, don't control Bing, so you can't do that.
It would be a major security problem if you could do that.
The nearest you could come to this would be to write a browser extension that had permission to access bing.com.
If you are specifically looking for Bing searches, you will have to introduce parameters into your href="https://Bing.com/"
example: https://Bing.com/search?q=SEARCHTHIS

Wordpress: how to use javascript variables into html body

I'm really new in Wordpress, Javascript and HTML so I know this question is really basic, but I wasn't able to find it solved anywhere.
I want to create some variables in javascript and then display them in my page which is created in Wordpress.
Reading other posts I've found I need to insert a javascript code that at the end stores my variable this way (dummy version):
<script type="javascript">
document.getElementById('test').innerHTML = 'hello';
</script>
And then on the text block I want to display my variable to be displayed I should add this code:
<body>
<p id="test"></p>
</body>
However I've tried adding the javascript in the header (Tatsu header) and also tried adding it in the text block (HTML version) in different combinations and it never worked. Tried adding the script block before and after the body block, and also tried having it inside, before and after the display line.
If I try the following it works:
<body>
<p>hello</p>
</body>
So I guess my problem is that I'm not setting the variable properly.
Can anyone help? Apologies if this is already solved somewhere, spent some hours and wasn't able to find it.
Thank you in advance.
Your problem is the type of which you're using here:
<script type="javascript">
I noticed this whilst constructing an example of this problem.
javascript is not a correct mime type.
It should be text/javascript as per https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
Please note this is not a complete list. Such as application/javascript also being valid. Please also see https://www.iana.org/assignments/media-types/media-types.xhtml
Working example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<p id="test">
This shouldn't show up
</p>
<script type="text/javascript">
console.log("####### JAVASCRIPT IS RUNNING ######")
document.getElementById('test').innerHTML = 'hello';
</script>
</body>
</html>

6 javascript tasks assigned to me by my lecturer

I am a complete beginner to javascript. I am also new to this website. I am asking for help to complete an assignment. I have been trying for more than 4 hours by looking at lecture material and online for a solution. It is causing me a lot of unnecessary stress. Before javascript we only used CSS and Html. I was given 6 javascript tasks to manipulate the html file (taskc.html) already given to me.
The tasks are as follows
Make a statement to change contents of h1 from "Welcome" to "Text"
2nd statement should make an new alert window when the page loads that delivers a message explaining what the page is about
3rd statement should change the title to "text"
4th statement should log the contents (innerHTML) of the first paragraph element in the console.
5th statement should hide the contents of the second paragraph when the page loads
6th statement should change the contents of the header to have a new colour of your choice
Here is that html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Task C - The Document Object Mode</title>
</head>
<body>
<h1 id="header">Welcome</h1>
<p id="first">This site uses JavaScript</p>
<p id="second">Javascript is very useful</p>
</body>
</html>
Because the actual coding im meant to add is meant to be in the .js file I was given. so I figured I had to link the js file in the html file so I added
<script type="text/javascript" src="taskc.js"></script>
With that out of the way I went to the lecture notes and I thought I would simply need to modify some of the code given to me there like
document.getElementById('demo').innerHTML = 'Hello World!';
When I put this code in brackets I got the error (document is not defined)
I modified it to match the requirements for task 1
here it is
document.getElementById('header').innerHTML = 'text';
I was confused because I didn't know what this error meant and of course Errors and how to fix them are never explained so I had to lookup how to resolve the error.
I found that to fix it I have to declare it as a variable so I ended up doing this.
var document = 'taskc.html';
When I did this for document, alert and console all the errors went away, but when I did a live preview only statement 1 was working
If anyone could help me fix this I would really appreciate because I don't understand enough javascript to be able to complete this in a reasonable amount of time.
So first: Please use Javascript functions to keep your code tidy and clean.
Example:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Task C - The Document Object Mode</title>
</head>
<body>
<h1 id="header">Welcome</h1>
<p id="first">This site uses JavaScript</p>
<p id="second">Javascript is very useful</p>
<script type="text/javascript" src="taskc.js">test();</script>
</body>
</html>
function test(){
alert("This is a test!");
}
Always implement scripts that are document referenced at the bottom of your html.
If you use JQuery you can use following code to check document is loaded:
$(document).ready(function(){
//foo bar
});

Inject HTML response into an iframe (from an AJAX call)

I won't beat around the bush: my AJAX call returns a message object response (message = {...}), where the messages.description parameter is an HTML string which looks something like this:
"<!doctype html>
<html>
<head>
<style>
...some style
</style>
</head>
<body>
...some content
</body>
</html>"
is there any way to embed it into an iframe? I'm not really familiar with iframes and any help on the matter is appreciated!
Also, I'm using vanilla React without babel or webpack, so React.createElement() aplenty. This is just to give new features an outline since my company wants to shift into React + node.js in the following months
You can inject your html to the iframe as below,
HTML:
<iframe id="iFrameID" src="javascript:void(0);"></iframe>
Javascript:
document.getElementById('iFrameID').src = "data:text/html;charset=utf-8," + escape(htmlContent);
You can't, because it's prohibited in policy of browsers crossdomain.
But you can in one case if you have control over the domain you want to update html in the iframe.
more information https://spring.io/understanding/CORS

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

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!

Categories