/    Sign up×
Community /Pin to ProfileBookmark

Hi! I have a script that generates a mission statement. I need the mission statement to come out in a separate window when the user clicks the button. Do you have any code that can help with this?

[code]<br><button id=”launch” class=”home-cta”>Create your mission statement!</button>

<div id=”story”>
<p></p>
<p> </p>

<script type=”text/javascript”>
window.onload = function () {
var word1 = document.querySelector(“#word1”);
var word2 = document.querySelector(“#word2”);
var word3 = document.querySelector(“#word3”);
var word4 = document.querySelector(“#word4”);

launch.addEventListener(“click”, writeStory, false);

function writeStory(){
var launchedStory = “”;
launchedStory += “<h3><p>Our mission is ” + word1.value + ” ” + word2.value + ” ” + word3.value + ” ” + word4.value + “</p> </h3>”;

story.innerHTML = launchedStory;
}
}
</script>
</div>
<br>

</script>[/code]

to post a comment
JavaScript

3 Comments(s)

Copy linkTweet thisAlerts:
@SempervivumNov 16.2020 — You can use window.open to open a new window:

https://developer.mozilla.org/en-US/docs/Web/API/Window/open

Note that in recent browsers it is not guaranteed that a new window will be opened, instead a new tab may be opened.

An alternative is using a modal, i. e. a box that opens in front of the existing page.

BTW: Use code tags: `your code here` or triple backtics when posting code.

I edited your posting accordingly.
Copy linkTweet thisAlerts:
@richardjaauthorNov 16.2020 — @Sempervivum#1625112 Thanks. I did try the windows.open code previously, but it just opened a new window with no content in it. I actually need the values to appear in the new window.
Copy linkTweet thisAlerts:
@SempervivumNov 16.2020 — Yes, the window being opened is empty, you need to add your content to it's body like this:
function writeStory() {
var launchedStory = "";
launchedStory += "&lt;h3&gt;&lt;p&gt;Our mission is " + word1.value + " " + word2.value + " " + word3.value + " " + word4.value + "&lt;/p&gt; &lt;/h3&gt;";
var newWin = window.open('', '_blank');
newWin.document.body.innerHTML = launchedStory;
}
×

Success!

Help @richardja spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 4.20,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...