Jump to content

Recommended Posts

Hi everyone,

I want to know, will Javascript's onclick on button work in PHP while loop? I mean, If I out "onclick" with function inside html tag, then put html inside echo under while loop. Will JavaScript's onclick work? Like this script below:

	$i = 0;
	while( $i < 5) {
	echo "<button id='btn' onclick='test()'>Hello</button>";
	$i++;
	}
	

This loop will create 4 times loop with same echo with onclick, so will onclick call Javascript programming?

Share this post


Link to post
Share on other sites

It is not clear what you are asking. Keep in mind that javascript is client side and php is server side. The two do not know about each other. Your code will produce 5 buttons on the displayed page. Each one will execute the javascript function 'test' when clicked by the user.

Share this post


Link to post
Share on other sites

A little bit neater coding of the same thing:

for( $i=0; $i < 5; $i++)
{
	echo "<button id='btn' onclick='test()'>Hello</button>";
}

 

Share this post


Link to post
Share on other sites

Read gw1500se's post a couple times.  Not necessarily the part about not being clear but the part about each operating in their own environment.  Draw two circles and put Client (HTML/JavaScript) in one and Server (PHP) in the other.  Then make an arrow from the client circle to the server circle and label it "request for HTML page" and then a return arrow and label it "HTML page".  Then maybe make an arrow from the client to the server and label it "form submission" and an arrow back labeled "form results".  You can do this for Ajax request as well.  For all of these, the client initiates a request and the server responds.  Do it until it is 100% clear in your head.

Share this post


Link to post
Share on other sites
Posted (edited)

Hi gw1500se,

I'm trying to create the loop that which read directory from folder with Javascript inside echo by loop like this -

	$file = opendir("htdocs/site/");
	 while($files = readdir($file)) {
	echo "<button onclick='test()'>".$files."</button><br />";
	}
	

it will create few button that will have text on buttons which list in folder.

Right now, I'm trying to make function in JavaScript when someone click one of several buttons, then JavaScript should response to change file or video or image. like you saw some website has several button, then you click on one of those button to see switch image on website.

Of course, i will use document.getElementByTagName("button") to retrieve text, but seem it didn't get text, even, i tried to add like .value and .textContent in JavaScript...still not work.

If you want, I can put my original script in next time.

Edited by sigmahokies

Share this post


Link to post
Share on other sites

Please do include the original code, not something edited for your post.

If the Javascript isn't working then that would be a Javascript problem, right? So what is that code?

And have you done a View Source of your page to make sure that the HTML is correct?

Share this post


Link to post
Share on other sites

Get by tag name may not be specific enough to get the right info.  Try using an id perhaps?  Passed in the call to the test() function

Share this post


Link to post
Share on other sites
Posted (edited)

All right, here my original code -

	<!doctype html>
<html>
<head>
    <title>Stimulation Video Home Alone</title>
    <link href="css/grammar.css" rel="stylesheet" type="text/css">
    <link rel="icon" href="images/sigma.png">
    <script type="text/javascript" src="js/checkbox.js"></script>
    <script>
        function clickvideo() {
            let x = document.getElementById("btn");
	                document.getElementById("display").innerHTML = "<video width='430' controls style='border-radius: 5px;' height='240' type='mp4'>" +
                    "<source src='UPLOADS/Breakfast/" + x + "'></video>";
            }
	    </script>
</head>
<form>
    <?php
    $video = opendir("UPLOADS/Breakfast/");
	    while(($listvideo = readdir($video)) !== FALSE) {
        if (preg_match("/^[^\.].*$/", $listvideo)) {
            echo "<input type='button' id='btn' value='".$listvideo."' onclick='clickvideo()'>&nbsp;";
        } $videoList = $listvideo;
    }
	    ?>
</form>
<body>
<table class="table" border="1">
    <tr>
        <td><a href="index.html"><img src="images/logo_new_final.jpeg" align="left" width="250"
                                      alt="Research"></a></td>
        <td rowspan="4">
            <iframe height="650" width="800" src="--------------.php" frameborder="0"></iframe>
        </td>
    </tr>
    <tr>
        <td>
            <video width="450" controls style="border-radius: 5px;">
                <source src="video/Ha_Demo.mp4">
            </video>
        </td>
    </tr>
    <tr>
        <td>
            <div id='display'>
                <video width='450' controls style='border-radius: 5px;'>
                    <source src="UPLOADS/Breakfast/<?php echo $videoList ?>">
                </video>
            </div>
        </td>
    </tr>
</table>
</body>
</html>
	

That's my original script...loop in php works, it show have a name on button from files' name in folder, but I can't figure why javascript won't do onclick when I'm asking for which video i want to see, like you can push button to have other video source appear on page. I tried to use .value and .textContent to retrieve text on button to make a switch video source on current page.

Edited by sigmahokies

Share this post


Link to post
Share on other sites

IDs must be unique. You cannot reference multiple buttons by "btn" (which is a poor ID anyways).

Change your onclick to

clickvideo(this)

then give your clickvideo a parameter with some descriptive name. That parameter will be the same as the "x" that you have there right now, so you don't have to try to get it some other way.

The parameter is also going to be the HTML element as a whole. If you want its value then you can get it using .value.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.